Change highlight color in Hermit theme

Using Themes
1

Hi there,

I can see that the code highlighting for the Hermit theme is defined in assets/scss/_syntax.scss partial as shown below:

/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }

I know this is a dumb question, but how can I change this?

I’ve tried modifying it directly, and no changes take affect in the browser.

Ideally, I’d like to override this in the site directory. Any tips?

Thanks,

Kim

2

This paragraph from the Readme of your theme (I hope that’s the right one, if not provide a link) should solve your question:

3

Thanks @davidsneighbour, I did indeed read that prior to posting my question.

My confusion is chiefly based on my trouble digesting that documentation in that I believe that I am running the extended version, and I am directly editing the scss file with no visible effect.

Here’s an example repo that might help expose what I’m doing wrong.

Any advice is appreciated.

4

The example repo in your previous answer is missing :wink:

5

Doh! Here it is

6

The way I “read” the theme it should recreate the style sheet with your changes.

It’s clearly re-generated. One thing that might change things is if you delete all _resources folders. This might be totally dumb and non related, but in this directory things are saved that are not available without Hugo extended.

If you delete this directory and hugo or hugo server fails then you are sure you are not on extended.

One last thing: I am not sure if we are talking about your local install or Netlify. Netlify probably takes the _resources directory and I can see a precompiled css file in there.

I am personally am not a fan of _resources in a repo. That’s something that in my humble opinion is only needed when deploying a theme that needs extended without having extended available (which is an opinion based on non-knowledge). You have extended on Netlify these days. In your own repo remove it and put into .gitignore. In the theme repo it’s required as per Hugo Themes site rules. Worst case: change the command in Netlify to rm _resources && hugo and you can be sure that SCSS files are parsed. You don’t break anything doing this, you just add some seconds to the build process.

But as I said: let’s clear up if we are talking about Netlify or your local install.

7

Thanks again, @davidsneighbour, for your help and interest.

I’m in agreement that I should “do the work” in my root project, not in the theme directory (and lower).

What I can’t figure out, I’m obviously not switched on to Hugo quite yet, is how I should handle css/scss in my project.

Do I create an ‘assets/scss’ folder somewhere and copy stuff in, or what?

8

Don’t change a thing in the theme folder. If you want to override any file in the themes layouts directory you create a file in your own layouts directory corresponding to the folder/file structure in the theme directory. Those always override theme files.

Then in the SCSS case, they write it misunderstand-able. But I think what they want you to do is to create your own assets/scss/_predefined.scss file. create the directories and then the file and put your changes in there. They will/should override their values.

Something I am doing often is to just copy the whole theme over and remove it as git-submodule. The advantage is that you have your hands on your own theme. The obvious disadvantage is that you won’t get any updates from the original theme.

This depends of course on how fit you are with all this Hugo-online-website-programming-stuff.

Your next steps are:

  • remove _resources folder from your repo and run hugo and see what happens
  • add assets/scss/_predefined.scss in your own repo and run hugo and see what happens
9

Hi @davidsneighbour,

Thanks again for the help.

I agree that the docs are somewhat misunderstand-able, which has led to some of my confusion and posting this in the first place.

Before posting I did try to create an assets directory in the root of my site. In there, I tried various things including:

  • Editing _syntax.scss, where the line of code that I want to edit exits.
  • Adding the the changes I wanted into _predefined.scss where they did not exist before and commenting out the one in _syntax.

But to no avail. As I understand SCSS anyhow, imported partials are processed in order, so anything in _syntax.sccs should override what’s in style.scss and predefined.scss.

There’s another section of the docs that says you use something like the below in the config.toml file:

[params]
  customCSS = ["css/foo.css", "css/bar.css"]

I’ve tried this too, and think it’s a bit weird to add css to an existing scss implementation. Regardless, I couldn’t get any changes to work here either.

For the record, I deleted resources and restarted Hugo after each attempt at a fix.

I’m probably doing something dumb, misunderstanding some fundamental aspect of Hugo, I just don’t know what that is yet.

10

Okay, I think I got it.

I basically upgraded Hermit and Hugo to the latest version.

While that itself is not a fix, I believe that choosing the extended version of Hugo was what did it. I am frankly not sure if I actually had the extended version installed in the first place, but I’m beginning to think that I did not.

With that in place, and after cleaning up the mess I made trying to fix this, here’s what works:

  • Copy themes/hermit/assets/scss/ to assets/scss/ in the root of the project.
  • Change the code as desired in assets/scss/_syntax.scss
  • Save the file
  • Changes are detected and Hugo rebuilds the site
  • Changes are visible without any further action