switch to DOM based variant adding

2021-12-30 23:52:53 +00:00
parent 0f0355fd01
commit acc8892f26
12 changed files with 2506 additions and 742 deletions
@@ -17,3 +17,51 @@ export function loadTheme() {
        document.documentElement.classList.remove('light');
    }
 }
+
+export class nightwind {
+    beforeTransition = () => {
+        const doc = document.documentElement;
+        const onTransitionDone = () => {
+            doc.classList.remove('nightwind');
+            doc.removeEventListener('transitionend', onTransitionDone);
+        }
+        doc.addEventListener('transitionend', onTransitionDone);
+        if (!doc.classList.contains('nightwind')) {
+            doc.classList.add('nightwind');
+        }
+    };
+    constructor() {
+        const theme = localStorage.getItem("theme");
+        if (theme == "dark") {
+            this.enable(true);
+        } else if (theme == "light") {
+            this.enable(false);
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
+            this.enable(true);
+        }
+    }
+
+    toggle = () => {
+        this.beforeTransition();
+        if (!document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
+    };
+
+    enable = (dark: boolean) => {
+        const mode = dark ? "dark" : "light";
+        const opposite = dark ? "light" : "dark";
+        
+        localStorage.setItem('theme', dark ? "dark" : "light");
+
+        this.beforeTransition();
+
+        if (document.documentElement.classList.contains(opposite)) {
+            document.documentElement.classList.remove(opposite);
+        }
+        document.documentElement.classList.add(mode);
+    };
+ }