# Useful trick for changing CSS themes on the fly

**URL:** <https://discourse.gohugo.io/t/useful-trick-for-changing-css-themes-on-the-fly/2766>\
**Category:** tips & tricks\
**Created:** [February 23, 2016, 5:34am UTC](https://discourse.gohugo.io/t/useful-trick-for-changing-css-themes-on-the-fly/2766 "2016-02-23T05:34:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucperkins](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lucperkins/32/1280_2.png) [@lucperkins](https://discourse.gohugo.io/u/lucperkins)\
**Post date:** [February 23, 2016, 5:34am UTC](https://discourse.gohugo.io/t/useful-trick-for-changing-css-themes-on-the-fly/2766/1 "2016-02-23T05:34:06Z")

</div>

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](https://code.getmdl.io/%7Bmdl-version%7D/material.%7Bprimary)}-{secondary}.min.css. You can see the color wheel [here](https://getmdl.io/customize/index.html).

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

```auto
params:
  colors:
    primary: indigo
    secondary: amber

```

Then you can generate your CSS includes like this:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![RobertCvn](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@RobertCvn](https://discourse.gohugo.io/u/RobertCvn)\
**Post date:** [June 19, 2017, 7:19am UTC](https://discourse.gohugo.io/t/useful-trick-for-changing-css-themes-on-the-fly/2766/2 "2017-06-19T07:19:16Z")

</div>

The [code.getmdl.io](http://code.getmdl.io) site now returns “Forbidden”. A pity, as this looks handy!

---

<div class="post-metadata">

**Author:** ![lucperkins](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lucperkins/32/1280_2.png) [@lucperkins](https://discourse.gohugo.io/u/lucperkins)\
**Post date:** [June 19, 2017, 2:43pm UTC](https://discourse.gohugo.io/t/useful-trick-for-changing-css-themes-on-the-fly/2766/3 "2017-06-19T14:43:19Z")

</div>

Try updating the version in the URL:

[https://getmdl.io/customize/index.html](https://getmdl.io/customize/index.html)