Generating dynamic CSS based on config file

support
1

I saw that this Jekyll based theme provides an option in the config file to change the colors of the theme globally. This is done by inserting the defined hex-codes in a css file.

It looks like this:

# Color settings (hex-codes without the leading hash-tag)
color:
  primary: 18bc9c
  secondary: 2c3e50
  secondary-dark: 233140

background-color: #{{ site.color.primary }};

Is something similar possible in Hugo?

2

If you inline your CSS in a template.

3

You mean with the <style> tag, right? That would work. Also moving the whole CSS file in its own partial would clean up the index file.

4

Yes, the style tag.

This will even give you star rating at Google Speed – but I would just have used it for a few key CSS elements, as I would loose the great benefit of “soft reloading” of CSS in Hugo.

5

What do you exactly mean with ‘soft reloading’?

6

If you change a stylesheet in /static when running with server --watch (livereload), you see the changes without needing the browser to reload. Works with images and stylesheets. It’s almost magic.

7

You meant the automatic reload function via

hugo server -w

that syncs changes.

You said

but I would just have used it for a few key CSS elements,

Is there any specific reason for that? I grabbd the hole CSS file from the original Jeykll theme and but them into the style tags. I just needed to convert Jeykll’s template slightly to make it compatible with Go’s.

8
  1. Putting all into the style tag would be better for overall speed on the site itself
  2. But during development (CSS tweaking) with livereload you would miss out on the “soft reload” which is much faster and smoother than the “full reload”
  1. is my specific reason. But up to you.
9
  1. That’s what I’ve done, since spliting up CSS file is a bit hacky if you want to add a newer one.