rsschouwenaar

:root {
 --textcolor: #06c;
}
h1 {
 color: var(--textcolor);
}

rsschouwenaar

.wrapper {
 --textcolor: #66e387;
}
div {
 color: var(--textcolor);
}

rsschouwenaar

<div class="wrapper">
	<h1>CSS Variable Are On 🔥</h1>
</div>
<div>
	<h1>CSS Variable Are On 🔥</h1>
</div>

rsschouwenaar

:root {
  --textcolor: #ffc845;
}
div {
  color: var(--textcolor);
}
.wrapper {
  --textcolor: #66e387;
}

rsschouwenaar

:root {
  --textcolor: #ffc845;
}

rsschouwenaar

.wrapper {
  --textcolor: #66e387;
}

rsschouwenaar

document.documentElement.style.setProperty("--textcolor","pink");

rsschouwenaar

document.querySelector('.wrapper').style.setProperty("--textcolor","pink");

rsschouwenaar

.darkmode {
  --text: #fff;
  --links: #66e387;
  --bg-start: #2c5364;
  --bg-middle: #203a43;
  --bg-end: #0f2027;
  --background-fallback: #0f2027; /* fallback for old browsers */
  --background-gradient-webkit: -webkit-linear-gradient(
  to bottom,
  var(--bg-start),

rsschouwenaar

body {
 font-size: 1.2rem;
 background: var(-background-fallback);
 background: var(-background-gradient-webkit);
 background: var(-background-gradient);
 color: var(-text);
}
a {
 color: var(-links-dark);
}