Adding automatic theme change

src/components/routes/settings/Settings.tsx

@@ -1,6 +1,6 @@
 import { h } from "preact";
 import { Page } from "../../../page";
-import Theme from "../../../theme";
+import Theme, { ThemeStates } from "../../../theme";
 import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
 
@@ -10,6 +10,7 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
     }
 
     render() {
+        let active = Theme.active();
         return <div>
             <header class="header">
                 <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
@@ -17,7 +18,18 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
                 <span></span>
             </header>
             <div class="container">
-                <button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button>
+                <div className="input-group">
+                    <label>Select Theme: </label>
+                    <select class="inp" onChange={(ev) => Theme.change(Number((ev.target as HTMLSelectElement).value))}>
+                        {Object.keys(ThemeStates)
+                            .filter(e => Number.isNaN(Number(e)))
+                            .map(e => <option selected={ThemeStates[e] === active} value={ThemeStates[e]}>{e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()}</option>)}
+                        {/* <option value={ThemeStates.AUTO}>Auto</option>
+                        <option value={ThemeStates.LIGHT}>Light</option>
+                        <option value={ThemeStates.DARK}>Dark</option> */}
+                    </select>
+                </div>
+                {/* <button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button> */}
                 <button class="btn" onClick={() => window.navigator.serviceWorker.controller.postMessage("clear_cache")}>Clear cache</button>
             </div>
         </div >;

src/components/routes/vaults/vaults.scss

@@ -3,7 +3,7 @@
    padding: 0.5rem;
    margin-top: 0 !important;
    align-items: flex-end;
-   justify-content: end;
+   justify-content: start;
 
    >span {
       font-size: 1.5rem;

src/index.tsx

@@ -99,17 +99,25 @@ console.log("Dark mode:", Theme.active);
          let err = await Notes.getToken(code)
          if (err) {
             Notifications.sendError("Login failed: " + err)
-            Notes.login()
+            return Notes.login()
          } else {
             window.history.replaceState(null, document.title, "/" + window.location.hash);
          }
       } else {
-         Notes.login()
+         return Notes.login()
       }
    }
 
    await Notes.start();
 
+   if (window.navigator.storage && navigator.storage.persist) {
+      navigator.storage.persisted()
+         .then(has => has ? true : navigator.storage.persist())
+         .then(is => {
+            console.log("Persistant Storage:", is);
+         })
+   }
+
    Navigation.default = VaultsPage as typeof Page;
    Navigation.addPage("/vault", VaultPage as typeof Page)
    Navigation.addPage("/demo", DemoPage as typeof Page)

src/theme.ts

@@ -1,27 +1,52 @@
 const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
 const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
 
-let isDark = localStorage.getItem("theme") === "dark";
+export enum ThemeStates {
+    AUTO,
+    LIGHT,
+    DARK
+}
+
+let themeConfig: ThemeStates = Number(localStorage.getItem("theme"));
+if (Number.isNaN(themeConfig))
+    themeConfig = ThemeStates.AUTO;
+
+let isDark = false;
+let mediaIsDark = false;
+
+if (window.matchMedia) {
+    const mediaq = matchMedia("(prefers-color-scheme: dark)");
+    mediaIsDark = mediaq.matches;
+    mediaq.onchange = ev => {
+        mediaIsDark = ev.matches;
+        apply();
+    }
+    console.log(mediaq);
+}
 
 
 let styleElm: HTMLStyleElement;
-
-function apply() {
-    if (styleElm) styleElm.remove();
-    styleElm = document.createElement("style");
-    document.head.appendChild(styleElm);
-    styleElm.innerHTML = isDark ? dark : light;
+function apply(force?: boolean) {
+    let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
+    if (force || shouldDark !== isDark) {
+        if (styleElm) styleElm.remove();
+        styleElm = document.createElement("style");
+        document.head.appendChild(styleElm);
+        styleElm.innerHTML = shouldDark ? dark : light;
+        isDark = shouldDark;
+    }
 }
-apply();
+apply(true);
 
-function toggle() {
-    isDark = !isDark;
-    localStorage.setItem("theme", isDark ? "dark" : "light");
+
+function change(state: ThemeStates) {
+    themeConfig = state;
+    localStorage.setItem("theme", String(themeConfig));
     apply();
 }
 
 export default {
-    active: () => isDark,
-    toggle: () => toggle()
+    active: () => themeConfig,
+    change: (state: ThemeStates) => change(state)
 }