@marianmeres/stuic 3.91.0 → 3.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
-->
|
|
23
23
|
<svelte:head>
|
|
24
24
|
<script>
|
|
25
|
-
const KEY = "stuic-color-scheme";
|
|
25
|
+
const KEY = window.__COLOR_SCHEME_KEY__ ?? "stuic-color-scheme";
|
|
26
26
|
const cls = window.document.documentElement.classList;
|
|
27
27
|
localStorage.getItem(KEY) === "dark" ? cls.add("dark") : cls.remove("dark");
|
|
28
28
|
</script>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
-->
|
|
22
22
|
<svelte:head>
|
|
23
23
|
<script>
|
|
24
|
-
const KEY = "stuic-color-scheme";
|
|
24
|
+
const KEY = window.__COLOR_SCHEME_KEY__ ?? "stuic-color-scheme";
|
|
25
25
|
const cls = window.document.documentElement.classList;
|
|
26
26
|
if (KEY in localStorage) {
|
|
27
27
|
localStorage.getItem(KEY) === "dark" ? cls.add("dark") : cls.remove("dark");
|
|
@@ -1,4 +1,17 @@
|
|
|
1
1
|
type Scheme = "dark" | "light";
|
|
2
|
+
declare global {
|
|
3
|
+
interface Window {
|
|
4
|
+
/**
|
|
5
|
+
* Optional global override for the localStorage key the inline bootstrap
|
|
6
|
+
* `<script>` in `<ColorSchemeLocal />` / `<ColorSchemeSystemAware />` reads
|
|
7
|
+
* from. Set this before the hydration component mounts (e.g. in
|
|
8
|
+
* `app.html` or at the very top of the root layout's `<script>`) to use a
|
|
9
|
+
* custom key with FOUC-free hydration. `ColorScheme.configure({ key })`
|
|
10
|
+
* also writes this global to keep runtime and bootstrap in sync.
|
|
11
|
+
*/
|
|
12
|
+
__COLOR_SCHEME_KEY__?: string;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
2
15
|
/**
|
|
3
16
|
* A utility class for managing light/dark color scheme preferences.
|
|
4
17
|
*
|
|
@@ -43,6 +56,10 @@ export declare class ColorScheme {
|
|
|
43
56
|
* Configure the runtime. Call early in app boot, before any consumer reads
|
|
44
57
|
* `ColorScheme.current`. Mutates module state; safe to call more than once
|
|
45
58
|
* (last write wins). Calling without changes is a no-op.
|
|
59
|
+
*
|
|
60
|
+
* Also writes `window.__COLOR_SCHEME_KEY__` so a subsequent hydration
|
|
61
|
+
* component mount (or any external bootstrap script that reads the global)
|
|
62
|
+
* stays in sync with the runtime.
|
|
46
63
|
*/
|
|
47
64
|
static configure(opts: {
|
|
48
65
|
key?: string;
|
|
@@ -63,10 +63,16 @@ export class ColorScheme {
|
|
|
63
63
|
* Configure the runtime. Call early in app boot, before any consumer reads
|
|
64
64
|
* `ColorScheme.current`. Mutates module state; safe to call more than once
|
|
65
65
|
* (last write wins). Calling without changes is a no-op.
|
|
66
|
+
*
|
|
67
|
+
* Also writes `window.__COLOR_SCHEME_KEY__` so a subsequent hydration
|
|
68
|
+
* component mount (or any external bootstrap script that reads the global)
|
|
69
|
+
* stays in sync with the runtime.
|
|
66
70
|
*/
|
|
67
71
|
static configure(opts) {
|
|
68
72
|
if (opts?.key && opts.key !== _key) {
|
|
69
73
|
_key = opts.key;
|
|
74
|
+
if (typeof window !== "undefined")
|
|
75
|
+
window.__COLOR_SCHEME_KEY__ = opts.key;
|
|
70
76
|
_sync();
|
|
71
77
|
}
|
|
72
78
|
}
|
|
@@ -131,6 +137,11 @@ export class ColorScheme {
|
|
|
131
137
|
}
|
|
132
138
|
}
|
|
133
139
|
if (typeof window !== "undefined") {
|
|
140
|
+
// If the app declared a custom key via the global (typical place: app.html,
|
|
141
|
+
// before the bootstrap <script> runs), adopt it so the runtime reads/writes
|
|
142
|
+
// the same key the bootstrap painted from.
|
|
143
|
+
if (window.__COLOR_SCHEME_KEY__)
|
|
144
|
+
_key = window.__COLOR_SCHEME_KEY__;
|
|
134
145
|
// Seed from localStorage (with system-pref fallback). Reading from the DOM
|
|
135
146
|
// here is unreliable: module init runs before the hydration component's
|
|
136
147
|
// inline <script> is appended to <head>, so the dark class isn't there yet.
|