CSS Variables - Theming

by PrismDan

HTML

<article>
  <header>
    <h1>Heading</h1>
  </header>
  
  <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipisicing elit. Voluptate doloribus itaque iusto.</p>
</article>

<button id="switch">Switch it up</button>

CSS

:root {
  --background: #023E50;
  --text: #E8DDCB;
  --accent: #CDB380;
  --fade-duration: 150ms;
  --fade-easing: ease-out;
}

body.theme-2 {
  --background: #fff;
  --text: #333;
  --accent: #FF6B6B;
}

body.theme-3 {
  --background: #1C140D;
  --text: #FFF;
  --accent: #3FB8AF;
}

body.theme-4 {
  --background: #EAE8EE;
  --text: #562287;
  --accent: #7D6DAE;
}

body {
  font-family: monospace;
  background: var(--background);
  color: var(--text);
  transition-property: background, color;
  transition-duration: var(--fade-duration);
  transition-timing-function: var(--fade-easing);
}

h1 {
  color: var(--accent);
  transition-property: color;
  transition-duration: var(--fade-duration);
  transition-timing-function: var(--fade-easing);
}

a {
  color: var(--accent);
  transition-property: color;
  transition-duration: var(--fade-duration);
  transition-timing-function: var(--fade-easing);
}

p {
  border-left: 4px solid var(--accent);
  padding-left: 1em;
}

button {
  border: 2px solid var(--accent);
  background: var(--background);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  padding: .5em 1em;
  margin-top: 1em;
  outline: none;
  transition-property: background-color, border-color, color;
  transition-duration: var(--fade-duration);
  transition-timing-function: var(--fade-easing);
}

JavaScript

let theme = 1;
const themeCount = 4;

document.getElementById('switch').addEventListener('click', (e) => {
	theme += 1;
  if (theme > themeCount) theme = 1;
	document.body.className = `theme-${theme}`;
});