Initial Version

2024-03-12 16:38:16 +01:00
commit 8882558b6e
1928 changed files with 106540 additions and 0 deletions
--- a/js/switch.js
+++ b/js/switch.js
@@ -0,0 +1,121 @@
+/**
+ *  Light Switch @version v0.1.4
+ */
+
+(function () {
+  let lightSwitch = document.getElementById('lightSwitch');
+  if (!lightSwitch) {
+    return;
+  }
+
+  /**
+   * @function darkmode
+   * @summary: changes the theme to 'dark mode' and save settings to local stroage.
+   * Basically, replaces/toggles every CSS class that has '-light' class with '-dark'
+   */
+  function darkMode() {
+    document.querySelectorAll('.bg-light').forEach((element) => {
+      element.className = element.className.replace(/-light/g, '-dark');
+    });
+
+    document.querySelectorAll('.link-dark').forEach((element) => {
+      element.className = element.className.replace(/link-dark/, 'text-white');
+    });
+
+    document.body.classList.add('bg-dark');
+
+    if (document.body.classList.contains('text-dark')) {
+      document.body.classList.replace('text-dark', 'text-light');
+    } else {
+      document.body.classList.add('text-light');
+    }
+
+    // Tables
+    var tables = document.querySelectorAll('table');
+    for (var i = 0; i < tables.length; i++) {
+      // add table-dark class to each table
+      tables[i].classList.add('table-dark');
+    }
+
+    // set light switch input to true
+    if (!lightSwitch.checked) {
+      lightSwitch.checked = true;
+    }
+    localStorage.setItem('lightSwitch', 'dark');
+  }
+
+  /**
+   * @function lightmode
+   * @summary: changes the theme to 'light mode' and save settings to local stroage.
+   */
+  function lightMode() {
+    document.querySelectorAll('.bg-dark').forEach((element) => {
+      element.className = element.className.replace(/-dark/g, '-light');
+    });
+
+    document.querySelectorAll('.text-white').forEach((element) => {
+      element.className = element.className.replace(/text-white/, 'link-dark');
+    });
+
+    document.body.classList.add('bg-light');
+
+    if (document.body.classList.contains('text-light')) {
+      document.body.classList.replace('text-light', 'text-dark');
+    } else {
+      document.body.classList.add('text-dark');
+    }
+
+    // Tables
+    var tables = document.querySelectorAll('table');
+    for (var i = 0; i < tables.length; i++) {
+      if (tables[i].classList.contains('table-dark')) {
+        tables[i].classList.remove('table-dark');
+      }
+    }
+
+    if (lightSwitch.checked) {
+      lightSwitch.checked = false;
+    }
+    localStorage.setItem('lightSwitch', 'light');
+  }
+
+  /**
+   * @function onToggleMode
+   * @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state.
+   */
+  function onToggleMode() {
+    if (lightSwitch.checked) {
+      darkMode();
+    } else {
+      lightMode();
+    }
+  }
+
+  /**
+   * @function getSystemDefaultTheme
+   * @summary: get system default theme by media query
+   */
+  function getSystemDefaultTheme() {
+    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+    if (darkThemeMq.matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+
+  function setup() {
+    var settings = localStorage.getItem('lightSwitch');
+    if (settings == null) {
+      settings = getSystemDefaultTheme();
+    }
+
+    if (settings == 'dark') {
+      lightSwitch.checked = true;
+    }
+
+    lightSwitch.addEventListener('change', onToggleMode);
+    onToggleMode();
+  }
+
+  setup();
+})();