flipping css variables

by phloe

HTML

<button class="toggler" type="button">Toggle theme</button>
<hr/>
<div class="box">
  <h2>
    Headline of the week
  </h2>
  <p>
  Ipsum dolores something something
  </p>
  <button>Press</button>
  
  <div class="block">
  <h2>
    Inverted box
  </h2>
  <p>
  Ipsum dolores something something
  </p>
  <button>Press</button>
</div>
</div>

SCSS

:root {
  /* define theme colors */
  --light-primary-text-color: #000;
  --light-secondary-text-color: #666;
  --light-background-color: #FFF;
  --dark-primary-text-color: #FFF;
  --dark-secondary-text-color: #CCC;
  --dark-background-color: #333;
  
  /* map initial theme colors */
  --primary-text-color: var(--light-primary-text-color);
  --secondary-text-color: var(--light-secondary-text-color);
  --background-color: var(--light-background-color);
  --inverted-primary-text-color: var(--dark-primary-text-color);
  --inverted-secondary-text-color: var(--dark-secondary-text-color);
  --inverted-background-color: var(--dark-background-color);
}

body {
  background-color: #EEE;
}


.block {
    /* flip theme colors */
    --local-primary-text-color: var(--inverted-primary-text-color);
    --local-secondary-text-color: var(--inverted-secondary-text-color);
    --local-background-color: var(--inverted-background-color);
    --local-inverted-primary-text-color: var(--primary-text-color);
    --local-inverted-secondary-text-color: var(--secondary-text-color);
    --local-inverted-background-color: var(--background-color);
    background-color: var(--local-background-color);
    padding: 20px;
    
    > * {
      --primary-text-color: var(--local-inverted-primary-text-color);
      --secondary-text-color: var(--local-inverted-secondary-text-color);
      --background-color: var(--local-inverted-background-color);
      --inverted-primary-text-color: var(--local-primary-text-color);
      --inverted-secondary-text-color: var(--local-secondary-text-color);
      --inverted-background-color: var(--local-background-color);
    }
  }
  .box--dark {
    /* flip theme colors */
    --local-primary-text-color: var(--inverted-primary-text-color);
    --local-secondary-text-color: var(--inverted-secondary-text-color);
    --local-background-color: var(--inverted-background-color);
    --local-inverted-primary-text-color: var(--primary-text-color);
   ...

JavaScript

var darkTheme;
var button = document.querySelector(".toggler");
var box = document.querySelector(".box");
button.addEventListener("click", function() {
	darkTheme = !darkTheme;
  box.className = "box" + ((darkTheme) ? " box--dark" : "");
});