@marianmeres/stuic 3.89.0 → 3.90.0

package/dist/components/ColorScheme/{color-scheme.d.ts → color-scheme.svelte.d.ts}

@@ -1,13 +1,21 @@
+type Scheme = "dark" | "light";
 /**
  * A utility class for managing light/dark color scheme preferences.
  *
  * Handles system preferences, localStorage persistence, and DOM class toggling.
  * Works with Tailwind CSS dark mode (class-based strategy).
  *
+ * The `ColorScheme.current` getter is reactive (Svelte 5 `$state`): reading it
+ * inside a `$derived`/`$effect`/template will react to toggles, cross-tab
+ * `storage` events, and OS-level system-preference changes.
+ *
  * @example
  * ```ts
- * // Get current color scheme (local preference or system default)
- * const scheme = ColorScheme.getValue(); // 'light' or 'dark'
+ * // Reactive current value (use in templates / $derived / $effect):
+ * const scheme = ColorScheme.current; // 'light' or 'dark'
+ *
+ * // Backward-compatible non-reactive read:
+ * const v = ColorScheme.getValue();
  *
  * // Toggle between light and dark
  * ColorScheme.toggle();
@@ -28,18 +36,24 @@ export declare class ColorScheme {
     static readonly KEY: "stuic-color-scheme";
     static readonly DARK: "dark";
     static readonly LIGHT: "light";
+    /**
+     * Reactive current value. Read inside `$derived`, `$effect`, or a Svelte
+     * template to react to scheme changes (including cross-tab `storage`
+     * events and OS-level system-preference changes).
+     */
+    static get current(): Scheme;
     /**
      * Reads the `prefers-color-scheme` system setting
      */
-    static getSystemValue(): "dark" | "light";
+    static getSystemValue(): Scheme;
     /**
      * Reads locally (localStorage) saved value
      */
-    static getLocalValue(fallback?: "dark" | "light"): "dark" | "light";
+    static getLocalValue(fallback?: Scheme): Scheme;
     /**
-     * Tries local first, fallbacks to system
+     * Tries local first, fallbacks to system. Backward-compatible alias for `current`.
      */
-    static getValue(): "dark" | "light";
+    static getValue(): Scheme;
     /**
      * Sets and saves the opposite of current.
      */
@@ -49,3 +63,4 @@ export declare class ColorScheme {
      */
     static reset(): void;
 }
+export {};

package/dist/components/ColorScheme/{color-scheme.js → color-scheme.svelte.js}

@@ -1,13 +1,29 @@
+let _current = $state("light");
+function _compute() {
+    return ColorScheme.getLocalValue(ColorScheme.getSystemValue());
+}
+function _sync() {
+    const next = _compute();
+    if (next !== _current)
+        _current = next;
+}
 /**
  * A utility class for managing light/dark color scheme preferences.
  *
  * Handles system preferences, localStorage persistence, and DOM class toggling.
  * Works with Tailwind CSS dark mode (class-based strategy).
  *
+ * The `ColorScheme.current` getter is reactive (Svelte 5 `$state`): reading it
+ * inside a `$derived`/`$effect`/template will react to toggles, cross-tab
+ * `storage` events, and OS-level system-preference changes.
+ *
  * @example
  * ```ts
- * // Get current color scheme (local preference or system default)
- * const scheme = ColorScheme.getValue(); // 'light' or 'dark'
+ * // Reactive current value (use in templates / $derived / $effect):
+ * const scheme = ColorScheme.current; // 'light' or 'dark'
+ *
+ * // Backward-compatible non-reactive read:
+ * const v = ColorScheme.getValue();
  *
  * // Toggle between light and dark
  * ColorScheme.toggle();
@@ -28,6 +44,14 @@ export class ColorScheme {
     static KEY = "stuic-color-scheme";
     static DARK = "dark";
     static LIGHT = "light";
+    /**
+     * Reactive current value. Read inside `$derived`, `$effect`, or a Svelte
+     * template to react to scheme changes (including cross-tab `storage`
+     * events and OS-level system-preference changes).
+     */
+    static get current() {
+        return _current;
+    }
     /**
      * Reads the `prefers-color-scheme` system setting
      */
@@ -43,10 +67,10 @@ export class ColorScheme {
         return (globalThis.localStorage?.getItem(ColorScheme.KEY) || fallback);
     }
     /**
-     * Tries local first, fallbacks to system
+     * Tries local first, fallbacks to system. Backward-compatible alias for `current`.
      */
     static getValue() {
-        return ColorScheme.getLocalValue(ColorScheme.getSystemValue());
+        return ColorScheme.current;
     }
     /**
      * Sets and saves the opposite of current.
@@ -55,6 +79,7 @@ export class ColorScheme {
         // returns bool, indicating whether token is in the list after the call or not.
         const isDark = globalThis?.document?.documentElement.classList.toggle(ColorScheme.DARK);
         globalThis.localStorage?.setItem(ColorScheme.KEY, isDark ? ColorScheme.DARK : ColorScheme.LIGHT);
+        _sync();
     }
     /**
      * Resets color scheme to system preference by removing localStorage value and classes.
@@ -62,5 +87,16 @@ export class ColorScheme {
     static reset() {
         globalThis.localStorage?.removeItem(ColorScheme.KEY);
         globalThis?.document?.documentElement.classList.remove(ColorScheme.DARK, ColorScheme.LIGHT);
+        _sync();
     }
 }
+if (typeof window !== "undefined") {
+    _current = _compute();
+    window.addEventListener("storage", (e) => {
+        if (e.key === ColorScheme.KEY)
+            _sync();
+    });
+    window
+        .matchMedia?.(`(prefers-color-scheme: ${ColorScheme.DARK})`)
+        .addEventListener("change", () => _sync());
+}

package/dist/components/ColorScheme/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./color-scheme.js";
+export * from "./color-scheme.svelte.js";
 export { default as ColorSchemeLocal, type Props as ColorSchemeLocalProps, } from "./ColorSchemeLocal.svelte";
 export { default as ColorSchemeSystemAware, type Props as ColorSchemeSystemAwareProps, } from "./ColorSchemeSystemAware.svelte";

package/dist/components/ColorScheme/index.js

@@ -1,3 +1,3 @@
-export * from "./color-scheme.js";
+export * from "./color-scheme.svelte.js";
 export { default as ColorSchemeLocal, } from "./ColorSchemeLocal.svelte";
 export { default as ColorSchemeSystemAware, } from "./ColorSchemeSystemAware.svelte";

package/dist/components/UserAvatarMenu/UserAvatarMenu.svelte

@@ -205,14 +205,13 @@
 		colorScheme === false ? false : cs.enabled !== false /* default true */
 	);
 
-	function readIsDark(): boolean {
-		return cs.isDark ? cs.isDark() : ColorScheme.getValue() === "dark";
-	}
-
-	let isDark = $state(false);
-	$effect(() => {
-		if (csEnabled) isDark = readIsDark();
-	});
+	const isDark = $derived(
+		csEnabled
+			? cs.isDark
+				? cs.isDark()
+				: ColorScheme.current === "dark"
+			: false
+	);
 
 	function toggleColorScheme() {
 		if (cs.onToggle) {
@@ -220,7 +219,6 @@
 		} else {
 			ColorScheme.toggle();
 		}
-		isDark = readIsDark();
 	}
 
 	// Default labels (English)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.89.0",
+	"version": "3.90.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",