Changing theme files/colors in Hugo Forty Theme

I cannot change the color of the tiles in the Forty theme. Forgive me if this is a really simple question, but I am new to Hugo. Essentially, the forty theme has tiles that look like the image below:

The problem I am having is that when I change the _vars.css file which apparently houses all of the different color data:

$palette: (
bg: #242943,
bg-alt: #2a2f4a,
fg: #ffffff,
fg-bold: #ffffff,
fg-light: rgba(244,244,255,0.2),
border: rgba(212,212,255,0.1),
border-bg: rgba(212,212,255,0.035),
highlight: #fff,
accent1: #8d82c4,
accent2: #8d82c4,
accent3: #ec8d81,
accent4: #e7b788,
accent5: #8ea9e8,
accent6: #87c5a4
);

nothing happens. And after a bit of experimenting, I found that changing these SCSS files did nothing. Could you please explain why this is, and how to change the colors of these tiles in Hugo? Thank you so much for your time, really appreciate it!

Raymond

The forty theme doesn’t use hugo pipes. So if you make changes in the scss files, you need to compile them yourself to css - https://www.sass-lang.com

Alternatively, you could edit the theme to take advantage of pipes…it’d be a good learning experience!

1 Like