Useful trick for changing CSS themes on the fly

I was playing around with Hugo and Google’s Material Design Lite (MDL) framework the other day and came up with a nice way to use Hugo’s configuration system to change the entire aesthetic of a site on the fly.

MDL has this great thing where you can choose a primary and secondary color and it will generate a special CSS file out of that available at{mdl-version}/material.{primary}-{secondary}.min.css. You can see the color wheel here.

Using Hugo you can set a primary and secondary color in your params like this:

    primary: indigo
    secondary: amber

Then you can generate your CSS includes like this:

<link rel="stylesheet" href="{{.Site.Params.colors.primary}}-{{.Site.Params.colors.secondary}}.min.css">

I’m not gonna lie, it’s super cool to watch the whole look and feel of your site change in real time just by changing your configuration.


The site now returns “Forbidden”. A pity, as this looks handy!

Try updating the version in the URL: