Set highlighting style in pixyll theme

support
1

In my previous theme (hyde-y) the documented way of changing the highlighting style worked.

[markup]
  [markup.highlight]
    style = "monokailight"

But I have been trying out the Pixyll theme and no matter what I try it always renders a dark background style. Updating the style in the toml will sometimes change the color of letters, but never the whole code block. I didn’t find anything on their page about how to change this and using pygmentsUseClasses does not change anything. I can see a bunch of highlighting style sheets in static/css/highlight/styles so I would assume the theme supports this, but I can’t seem to change it. Is there something here that I am missing?

2

The theme author combined a bunch of CSS and did not provide the tools to change things.

https://github.com/azmelanar/hugo-theme-pixyll/blob/master/layouts/partials/head.html#L18-L20

You can override the styles, but in my view it is not worth the effort:

  1. This theme is difficult to customize.
  2. It hasn’t been updated in 15 months—that’s a long time in Hugo land.

I’d find a different theme.

If you really want to override the combined CSS, you could try:

mkdir layouts/partials
cp themes/hugo-theme-pixyll/layouts/partials/head.html layouts/partials/

Then edit layouts/partials/head.html:

<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}/css/combined-min.css">
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}/css/highlight/styles/github.css">
<style>
  body > div.site-wrap > div > div > article > div > pre {
    background-color: #fff !important;
    padding: 0;
    line-height: inherit;
  }
</style>

But again, I think this is a waste of time. I would look for another theme.