Difficulties styling colour in the hyde-hyde theme


I am using hyde-hyde theme https://themes.gohugo.io/hyde-hyde/

I want to change the sidebar colour, but haven’t been able to. A few things I have found:


// sidebar
$sidebar-color: #300030;


    .sidebar {
  background-color: $sidebar-color;

Changing the $sidebar-color to my new color does nothing. Even changing the background-color: to a html color code does nothing.

I have tried refreshing the page, stopping and re-starting the server, starting the server and disabling fast render.

I found:

.sidebar {
  background-color: #300030;  

Again, changing this doesn’t appear to do anything.

I tried changing these properties individually, and changed both these files to my new colour:

I also found in:

 * Themes
 * As of v1.1, Hyde includes optional themes to color the sidebar and links
 * within blog posts. To use, add the class of your choosing to the `body`.

/* Base16 (http://chriskempson.github.io/base16/#default) */

/* Red */
.theme-base-08 .sidebar {
  background-color: #ac4142;
.theme-base-08 .content a,
.theme-base-08 .related-posts li a:hover {
  color: #ac4142;

/* Orange */
.theme-base-09 .sidebar {
  background-color: #d28445;
.theme-base-09 .content a,
.theme-base-09 .related-posts li a:hover {
  color: #d28445;

More color 'profiles` followed, I cut them for brevity

But I don’t know what to do with this. I did visit the github page, but that wasn’t any help to me.

I have looked through all the .css and .scss files in the theme and nothing is ‘jumping out at me’.

Can anyone offer any suggestions?


Which version of hugo is installed? Type hugo version at the command line.


The version output:
Hugo Static Site Generator v0.74.1-15163266 linux/amd64 BuildDate: 2020-07-13T18:52:46Z

Another interesting thing is if I go into Firefox, inspect element and change the .sidebar color to my new color, it works fine. But when I try to find that same code in the template source and change it there, it’s no good.

You need to install the extended version.

1 Like

@jmooring many thanks.

I Installed the extended version - didn’t even know it existed. Changed the bit of code I thought it should be, and its working as I expected now. :+1:

For anyone reading this in the future…

  • Hugo Extended Version supports .scss
  • the code I changed to change the sidebar color was:
// sidebar
$sidebar-color: #300030;

Change the html color code to whatever you need.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.