Useful trick for changing CSS themes on the fly

tips & tricks
1

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 https://code.getmdl.io/{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:

params:
  colors:
    primary: indigo
    secondary: amber

Then you can generate your CSS includes like this:

<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.{{.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.

3 Likes
2

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

3

Try updating the version in the URL:

https://getmdl.io/customize/index.html