SOURCE

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

themeBtns.forEach(function (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;
  }
}

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

<h2>Stackoverflow Question</h2>
<p>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?</p> 

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

.toolbar {
  text-align: center;
}