Theme switcher with CSS Variables

https://codesandbox.io/s/24j4m8y5kn

by Swedish_li

HTML

<div class="toolbar">
  <button value="dark">dark</button>
  <button value="calm">calm</button>
  <button value="light">light</button>
</div>

<h2>Stackoverflow Question</h2>
I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
How do I use the globals.js inside the logic.js?

<h2>Stackoverflow Answer</h2>
Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your
globals file before the logic file in the tags:

<pre><code>
script type="text/javascript" src="globals.js"
</code></pre>
If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop
to see if some particular variable is available before calling an init() or whatever function.

CSS

body {
  background-color: var(--bg, #b3e5fc);
  color: var(--bg-text, #37474f);
  font-family: sans-serif;
  line-height: 1.3;
}

.toolbar {
  text-align: center;
}

JavaScript

const root = document.documentElement;
const themeBtns = document.querySelectorAll(".toolbar > button");

themeBtns.forEach(btn => {
  btn.addEventListener("click", handleThemeUpdate);
});

function handleThemeUpdate(e) {
  switch (e.target.value) {
    case "dark":
      root.style.setProperty("--bg", "black");
      root.style.setProperty("--bg-text", "white");
      break;
    case "calm":
      root.style.setProperty("--bg", "#B3E5FC");
      root.style.setProperty("--bg-text", "#37474F");
      break;
    case "light":
      root.style.setProperty("--bg", "white");
      root.style.setProperty("--bg-text", "black");
      break;
  }
}