https://ronin-rb.dev/javascript/default.js

1class DarkModeToggle {
2  constructor() {
3    this.button = document.querySelector("#dark-mode-toggle");
4    this.sun    = this.button.querySelector("#dark-mode-sun");
5    this.moon   = this.button.querySelector("#dark-mode-moon");
6
7    if (this.isEnabled() || this.darkModePreferred()) {
8      // turning the switch off == dark mode
9      this.moon.style.display = "inline";
10      this.sun.style.display  = "none";
11      document.body.classList.add("dark-mode");
12    }
13
14    this.button.addEventListener("click", this.toggle.bind(this));
15  }
16
17  isEnabled() { return localStorage.getItem("dark-mode") != null; }
18
19  darkModePreferred() {
20    return window.matchMedia("(prefers-color-scheme: dark)").matches;
21  }
22
23  disable() {
24    this.moon.style.display = "none";
25    this.sun.style.display  = "inline";
26    document.body.classList.remove("dark-mode");
27
28    localStorage.removeItem("dark-mode");
29  }
30
31  enable() {
32    this.moon.style.display = "inline";
33    this.sun.style.display  = "none";
34    document.body.classList.add("dark-mode");
35
36    localStorage.setItem("dark-mode",true);
37  }
38
39  toggle(setting) {
40    if (this.isEnabled()) { this.disable(); }
41    else                  { this.enable();  }
42  }
43}
44
45const ready = (callback) => {
46  if (document.readyState != "loading") { callback(); }
47  else { document.addEventListener("DOMContentLoaded", callback); }
48}
49
50ready(() => {
51  const dark_mode_toggle = new DarkModeToggle();
52});