@quaffui/quaff 1.0.0-beta12 → 1.0.0-beta13

package/dist/classes/Quaff.svelte.d.ts

@@ -1,3 +1,4 @@
+type DisplayMode = "light" | "dark";
 declare class Quaff {
     version: string;
     private static readonly breakpointList;
@@ -15,6 +16,8 @@ declare class Quaff {
     router: import("@sveltejs/kit").Page<Record<string, string>, string | null>;
     protected dark: boolean;
     init(): void;
+    protected getCurrentDisplayMode(): DisplayMode;
+    protected applyDisplayMode(displayMode: DisplayMode, persist?: boolean): void;
     protected toggleDarkMode(): void;
     protected setDarkMode(newVal: boolean): void;
     get darkMode(): {

package/dist/classes/Quaff.svelte.js

@@ -2,6 +2,7 @@ import { onMount } from "svelte";
 import { innerWidth } from "svelte/reactivity/window";
 import { version } from "../helpers";
 import { page } from "$app/state";
+const DISPLAY_MODE_STORAGE_KEY = "displayMode";
 class Quaff {
     version = version;
     static breakpointList = {
@@ -53,28 +54,31 @@ class Quaff {
     dark = $state(false);
     init() {
         onMount(() => {
-            const currentMode = localStorage.getItem("current_mode") ||
-                (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-            if (currentMode === "dark") {
-                this.dark = true;
-            }
-            else {
-                this.dark = false;
-            }
+            this.applyDisplayMode(this.getCurrentDisplayMode(), false);
         });
     }
+    getCurrentDisplayMode() {
+        const savedDisplayMode = localStorage.getItem(DISPLAY_MODE_STORAGE_KEY);
+        if (savedDisplayMode === "dark" || savedDisplayMode === "light") {
+            return savedDisplayMode;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    applyDisplayMode(displayMode, persist = true) {
+        this.dark = displayMode === "dark";
+        if (typeof document !== "undefined") {
+            document.body.classList.remove("body--light", "body--dark");
+            document.body.classList.add(`body--${displayMode}`);
+        }
+        if (persist && typeof localStorage !== "undefined") {
+            localStorage.setItem(DISPLAY_MODE_STORAGE_KEY, displayMode);
+        }
+    }
     toggleDarkMode() {
-        this.dark = !this.dark;
-        const mode = {
-            from: this.dark ? "light" : "dark",
-            to: this.dark ? "dark" : "light",
-        };
-        const body = document.querySelector("body");
-        body?.classList.replace(`body--${mode.from}`, `body--${mode.to}`);
-        localStorage.setItem("current_mode", mode.to);
+        this.applyDisplayMode(this.dark ? "light" : "dark");
     }
     setDarkMode(newVal) {
-        this.dark = newVal;
+        this.applyDisplayMode(newVal ? "dark" : "light");
     }
     get darkMode() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.0-beta12";
+declare const _default: "1.0.0-beta13";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "1.0.0-beta12";
+export default "1.0.0-beta13";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "1.0.0-beta12",
+  "version": "1.0.0-beta13",
   "scripts": {
     "dev": "tsc -p plugins/tsconfig.json && vite dev",
     "open": "tsc -p plugins/tsconfig.json && vite dev --open",