Creating CSS Global Variables : Stylesheet theme management
Latest Update: 16/01/2020
CSS Custom Properties (Variables) have arrived!
It's 2020 and time to officially roll out this feature in your new applications.
Preprocessor "NOT" required!
There is a lot of repetition in CSS. A single color may be used in several places.
For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally.
For non-trivial projects, this is not always possible. By declaring a variable on the :root
pseudo-element, a CSS author can halt some instances of repetition by using the variable.
How it works
Set your variable at the top of your stylesheet:
CSS
Create a root class:
:root {
}
Create variables (-- [String] : [value])
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
Set your variables anywhere in your CSS document:
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
BROWSER SUPPORT / COMPATIBILITY
See caniuse.com for current compatability.
Firefox: Version 31+ (Enabled by default)
Supported since 2014 (Leading the way as usual.)
More info from Mozilla
Chrome: Version 49+ (Enabled by default).
Supported since 2016
Safari/IOS Safari: Version 9.1/9.3 (Enabled by default).
Supported since 2016
Opera: Version 39+ (Enabled by default).
Supported since 2016
Android: Version 52+ (Enabled by default).
Supported since 2016
Edge: Version 15+ (Enabled by default).
Supported since 2017
CSS Custom Properties landed in Windows Insider Preview build 14986
IE: When pigs fly.
It's time to finally let this ship sink. No one enjoyed riding her anyway. ☺
W3C SPEC
Full specification for upcoming CSS variables
Read more
TRY IT OUT
A fiddle and snippet are attached below for testing:
(It will only work with supported browsers.)
DEMO FIDDLE
:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
--W200: 200px;
--Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
float: var(--Lft);
width: var(--W200);
height: var(--W200);
margin: 10px;
padding: 10px;
border: 1px solid var(--red);
}
.Bx1 {
color: var(--red);
background: var(--grey);
}
.Bx2 {
color: var(--grey);
background: black;
}
.Bx3 {
color: var(--grey);
background: var(--blue);
}
.Bx4 {
color: var(--grey);
background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>
<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
How to store CSS variables in the browser memory
Use window.localStorage
to store the property value when changed and apply it on script execution, if it's been saved.
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
if(localStorage.getItem("--MyBackColor") != null)
document.documentElement.style.setProperty("--MyBackColor", localStorage.getItem("--MyBackColor"));
document.getElementById("refresh").addEventListener("click", (event) => {
window.location.reload();
});
document.getElementById("yellow").addEventListener("click", (event) => {
document.documentElement.style.setProperty("--MyBackColor", "yellow");
localStorage.setItem("--MyBackColor", "yellow");
});
document.getElementById("white").addEventListener("click", (event) => {
document.documentElement.style.setProperty("--MyBackColor", "white");
localStorage.setItem("--MyBackColor", "white");
});
:root {
--MyBackColor: white;
}
body {
background: var(--MyBackColor);
}
hi
<button id="white">White</button>
<button id="yellow">Yellow</button>
<button id="refresh">Refresh</button>
CSS global variable change with js
here is the answer to your question.
So if you want to change value of any variable from linked question, you nee to do something like:
document.styleSheets[0].rules[0].style.setProperty("--red", "#FF0000");
Of course indexes of arrays must be double checked of iterated for finding corresponding selector
How to use variable in CSS?
For that you need to use Less or Sass which are CSS Dynamic languages.
here's some comparison between both technologies.
How to use variable in CSS?
For that you need to use Less or Sass which are CSS Dynamic languages.
here's some comparison between both technologies.
Related Topics
What Does the Forward Slash Mean in the CSS Font Shorthand
100Vw Causing Horizontal Overflow, But Only If More Than One
Can CSS Force a Line Break After Each Word in an Element
Ie11 - Does a Polyfill/Script Exist For CSS Variables
Is There a Sass.Js? Something Like Less.Js
@Font-Face Anti-Aliasing on Windows and Mac
Do I Need to Wrap Quotes Around Font Family Names in Css
Relationship Between !Important and CSS Specificity
Css Selector For Attribute Names Based on a Wildcard
Wave (Or Shape) With Border on Css3
How to Select an Nth Child Without Knowing the Parent Element
Why Percentage Value Within Grid-Gap Create Overflow in CSS Grid
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)