How can I define colors as variables in CSS?

by

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.

More Related Contents:

  1. How do I apply opacity to a CSS color variable?
  2. How to change the color of an svg element?
  3. CSS scoped custom property ignored when used to calculate variable in outer scope
  4. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  5. Is there a way to interpolate CSS variables with url()?
  6. How do I debug CSS calc() value?
  7. How to create color shades using CSS variables similar to darken() of Sass?
  8. CSS hexadecimal RGBA?
  9. CSS native variables not working in media queries
  10. How to store inherit value inside a CSS variable (aka custom property)?
  11. How to thematize in lesscss
  12. Can I use variables for selectors?
  13. Creating CSS Global Variables : Stylesheet theme management [duplicate]
  14. How to use a unitless CSS variables and later add the needed unit?
  15. Why can’t I animate custom properties (aka CSS variables)?
  16. how to reset a CSS variable (aka custom properties) and use the fallback one?
  17. Convert 8-digit hex colors to rgba colors?
  18. Chrome renders colours differently from Safari and Firefox
  19. Using attr to set css variable inline that work with CSP
  20. div background color, to change onhover
  21. Create a variable in .CSS file for use within that .CSS file [duplicate]
  22. How can I change the color of an ‘svg’ element?
  23. Are there any good reasons for using hex over decimal for RGB colour values in CSS?
  24. How can I invert color using CSS?
  25. Are there any cons to using color names in place of color codes in CSS?
  26. How does hexadecimal color work?
  27. How to use variable in CSS? [duplicate]
  28. Is there any clean CSS method to make each letter in a word a different color?
  29. Is there a difference between CSS custom properties and CSS variables?
  30. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]

Leave a Comment