Milligram: Easily change highlight color (#9b4dca)

Created on 22 Feb 2018 · 6Comments · Source: milligram/milligram

Using CSS3 variables (custom properties) it is possible to override the highlight color in 1 line of CSS.

In milligram.css have something along the lines of:

:root {
  --highlight-color: #9b4dca;
}

and then replace every #9b4dca with var(--highlight-color).

Once this is done, replacing the highlight color is as easy as including a custom.css file with

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

Source

mterron

👍10 ❤3

Most helpful comment

I came here for the same thing ^^ but since it is written in SASS and you might want to support old browsers I would recommend doing a more fallback proven example like this:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

This way browsers who don't support CSS custom properties will still fallback to a working version. Also this way no :root {} in the actual stylesheets is needed since var() already provides a fallback option.

Cheers,
Dominik

dkundel on 23 Mar 2018

👍6

All 6 comments

I came here for the same thing ^^ but since it is written in SASS and you might want to support old browsers I would recommend doing a more fallback proven example like this:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

Cheers,
Dominik

dkundel on 23 Mar 2018

👍6

Is their any progress or anything done on this so far? 😄

timrossback on 29 Jun 2019

Is their any progress or anything done on this so far? 😄

you can always change the values of the colors from the src/_Color.sass and then recompile again with sass --update. You can also add your own sass files.

dntzbgh on 29 Jun 2019

Is their any progress or anything done on this so far? 😄

you can always change the values of the colors from the src/_Color.sass and then recompile again with sass --update. You can also add your own sass files.

Good point! I guess I'm looking for a bit more out-of-the-box solution since I don't use Sass, but I don't really know how that could be easily done other than changing the values themselves in /dist/milligram.min.css which would be problematic.

timrossback on 30 Jun 2019

👍1

Love this framework! Can't wait for this feature to be released 🚀