CSS variables

by rafalgradziel

HTML

<h1>
  Sample
</h1>

<ul class="menu">
  <li>item 1</li>
  <li class="selected">item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

Highlight color:
<input type="text" value="" id="textHighlight" />
<br/>

<input type="button" id="changeToRed" class="button" value="Change to red" />

CSS

:root {
  /* CSS variables */
  --colDefault: #000;
  --colHighlight: #22aa99;
  --colHighlight2: #fff;
  --size: 12pt;
}

* {
  color: var(--colDefault); /* sample use of CSS variable */
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Arial, sans-serif
}

h1 {
  color: var(--colHighlight);
  margin-bottom: 1em;
}

ul.menu {
  color: var(--colHighlight);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1em
}

ul.menu li,
.button {
  padding: 0.2em 0.5em;
  margin: 0;
  font-size: var(--size);
  border: 1px solid var(--colHighlight);
  /* example how to manipulate with variable values */
  border-bottom: calc(var(--size) * 0.5) solid var(--colHighlight);
  display: inline-block;
}

ul.menu li.selected {
  color: var(--colHighlight2);
  background: var(--colHighlight);
}

.button {
  margin: 1em 0.5em;
}

JavaScript

// show CSS variable value
var bodyStyles = window.getComputedStyle(document.body);
var colHighlight =  String(bodyStyles.getPropertyValue('--colHighlight'));
var text = document.getElementById('textHighlight');
text.value = colHighlight;

// hook on click
document.getElementById('changeToRed').addEventListener('click', function() {
  // change CSS variable value
  document.body.style.setProperty('--colHighlight', '#ff0000');
});