switch to DOM based variant adding

ts/admin.ts

@@ -1,4 +1,4 @@
-import { toggleTheme, loadTheme } from "./modules/theme.js";
+import { nightwind } from "./modules/theme.js";
 import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
 import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
@@ -9,7 +9,8 @@ import { ProfileEditor } from "./modules/profiles.js";
 import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
 
-loadTheme();
+let theme = new nightwind();
+
 const themeButton = document.getElementById('button-theme') as HTMLSpanElement;
 const switchThemeIcon = () => {
     const icon = themeButton.childNodes[0] as HTMLElement;
@@ -28,7 +29,7 @@ const switchThemeIcon = () => {
     }
 };
  themeButton.onclick = () => {
-    toggleTheme();
+    theme.toggle();
     switchThemeIcon();
  }
 switchThemeIcon();

ts/modules/theme.ts

@@ -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);
+    };
+ }