<nav>
  Some stuff here with <a href="">a link even</a> woopty doo 🎉
</nav>

<article>
  <h1>Here's some block</h1>
  <p>It has buttons with a background and a border and text. Click a button below to change the theme.</p>
  <button onclick="themeReset()">Default Theme</button>
  <button onclick="themeDark()">Dark Theme</button>
  <button onclick="themeOtherMix()">Other Theme (Dark + Other Mix)</button>
  <button onclick="themeOther()">Other Theme (Default + Other)</button>
</article>

<p>So now you get the idea? Define every color ever used in an app as a variable, then make a theme by changing those variables. The only CSS you'll be writing is changing variables.

You could split them up into individual theme files and import when needed.</p>

// Here's your main theme
:root {
  --body-bg: #fff;
  --nav-bg: #ccc;
  --nav-text: #000;
  --link-color: hsla(287, 56%, 34%, 1);
  --h1-color: #444;
  --text-color: #666;
  --button-border-color: #6A48EA;
  --button-text-color: #000;
  --button-bg-color: hsla(253, 100%, 90%, .5);
}

// Here's your dark theme
body.dark {
  --body-bg: #111;
  --nav-bg: #222;
  --nav-text: #ccc;
  --link-color: #2CC6F8;
  --h1-color: #999;
  --text-color: #dadada;
  --button-border-color: #222;
  --button-text-color: var(--link-color); // how fucking cool is that
  --button-bg-color: #222;
}

// And here I'll just selectively change some colors
// Others will stay as default defined in :root
// BUT if you mix classes, this one will be applied too
// since it's after .dark
body.other {
  --nav-bg: #6A48EA;
  --nav-text: #fff;
  --link-color: #2CC6F8;
  --h1-color: var(--nav-bg);
}

body {
  background-color: var(--body-bg);
  font-size: 16px;
  padding: 3rem 1rem;
}

nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: var(--nav-bg);
  color: var(--nav-text);
}

a {
  color: var(--link-color);
}

h1 {
  color: var(--h1-color);
}

p {
  color: var(--text-color);
}

button {
  border: 2px solid var(--button-border-color);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .35em;
}

function themeReset() {
  document.body.classList.remove('dark', 'other')
}

function themeDark() {
  document.body.classList.remove('other')
  document.body.classList.add('dark')
}

function themeOtherMix() {
  document.body.classList.add('other', 'dark')
}

function themeOther() {
  document.body.classList.remove('dark')
  document.body.classList.add('other')
}