feat: add theme switch

1 files changed, 36 insertions, 0 deletions

diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 00000000..6057f357
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,36 @@
+(() => {
+    const THEME = 'geedeapro.theme' // auto | light | dakr
+    const mql = window.matchMedia('(prefers-color-scheme: dark)')
+
+    function useDarkMode(store) {
+        document.documentElement.classList.add('dark')
+        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
+        if (store) localStorage.setItem(THEME, 'dark')
+    }
+
+    function useLightMode(store) {
+        document.documentElement.classList.remove('dark')
+        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
+        if (store) localStorage.setItem(THEME, 'light')
+    }
+
+    function useSystem(store) {
+        if (mql.matches) useDarkMode()
+        else useLightMode()
+        mql.onchange = e => {
+            console.log("changed when system changed")
+            if (e.matches) useDarkMode()
+            else useLightMode()
+        }
+        if (store) localStorage.setItem(THEME, 'auto')
+    }
+
+    window.switchTheme = (theme, store) => {
+        if (!theme || theme === 'auto') useSystem(store)
+        else if (theme === 'dark') useDarkMode(store)
+        else if (theme === 'light') useLightMode(store)
+    }
+
+    // use preferred theme immediately upon DOM loaded
+    window.switchTheme(localStorage.getItem(THEME), false)
+})();