How to store CSS variables in the browser memory

Question

I checked this topic about CSS variables; Creating CSS Global Variables : Stylesheet theme management

I define global vars,

:root {
--MytextColor: blue;
--MyBackColor: black;
}

and I m able to modify values using javascript with this line,

document.documentElement.style.setProperty('--MyBackColor', 'yellow');

that's fine, but when I refresh the page they return back to original values, is it possible to keep these variables in the memory, or cookies or etc. until we clear browser data (such as full refresh Ctrl+F5).

The reason I was trying that is to make light mode, dark mode using same css class only with css values.

Explore [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) for this. — Lakshya Thakur, May 10 '21 at 13:53
not possible without javascript. you would need to store the data in `localStorage` and then always copy them to the css vars — Lux, May 10 '21 at 13:55

ssc-hrep3 · Answer 1 · 2021-05-10T13:58:45.573

1

A web page is always reloaded from scratch when it is refreshed. If you need to keep the state over page refreshs, you need to store the value somewhere. You can do this by using a cookie, the indexed DB or just the simple local storage.

Here is an example:

const color = localStorage.getItem('color-mode');
if (color !== null) {
  document.documentElement.style.setProperty('--MyBackColor', color);
}

Set the value to the local storage by using:

localStorage.setItem('color-mode', 'yellow');

edited May 10 '21 at 13:58

answered May 10 '21 at 13:56

ssc-hrep3

15,024
7
48
87

`getItem` doesn't return undefined, nor does `typeof null` equal to `undefined`. `null` is an object. – Nora May 10 '21 at 13:57
Yes, you are right, localStorage returns `null`, not `undefined`. Just changed it. – ssc-hrep3 May 10 '21 at 13:59

score 1 · Accepted Answer · answered May 10 '21 at 13:56

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>

score 0 · Answer 3 · answered May 10 '21 at 13:56

0

You should try to save the variable names in localStorage. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Then you would take whatever you want from the localStorage or it will fall back to a default value

answered May 10 '21 at 13:56

Abregre

486
4
11

How to store CSS variables in the browser memory

3 Answers3

Linked