How can I define colors as variables in CSS?

css variables colors css-variables
patrick picture patrick · Dec 9, 2009 · Viewed 228.2k times · Source

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?

Please note that I can’t use PHP to dynamically change the CSS file.

Answer

Arthur Weborg picture Arthur Weborg · Jul 11, 2013

CSS supports this natively with CSS Variables.

Example CSS file

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and current syntax, to set the color to blue).

Manipulating a CSS variable in JavaScript/client side

document.body.style.setProperty('--main-color',"#6c0")

Support is in all the modern browsers

Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+ and Opera 36+ ship with native support for CSS variables.

Related questions

Modify alpha opacity of LESS variable

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this: background: lighten(@blue, 20%); I want to change the alpha opacity of my color, though. Preferably like this: background: alpha(@blue, 20%); …

Read More
Set Webkit Keyframes Values Using Javascript Variable

I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(-10deg);} 100% {-webkit-transform: rotate(10deg);} } #dog{ /*irrelevant settings*/ -webkit-animation: rotate 5…

Read More
Can I use variables for selectors?

I have this variable: $gutter: 10; I want to use it in a selector like so SCSS: .grid+$gutter { background: red; } so the output becomes CSS: .grid10 { background: red; } But this doesn't work. Is it possible?

Read More