your personal website on atproto - mirror
blento.app
Merge pull request #172 from flo-bit/npmx
fixes
+19
-2
+17
src/lib/website/ThemeScript.svelte
+17
src/lib/website/ThemeScript.svelte
···
1
1
<script lang="ts">
2
+
import { browser } from '$app/environment';
3
+
2
4
let {
3
5
accentColor = 'pink',
4
6
baseColor = 'stone'
···
7
9
baseColor?: string;
8
10
} = $props();
9
11
12
+
const allAccentColors = [
13
+
'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
14
+
'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
15
+
];
16
+
const allBaseColors = ['gray', 'stone', 'zinc', 'neutral', 'slate'];
17
+
10
18
const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c');
11
19
20
+
// SSR: inline script for initial page load (no FOUC)
12
21
let script = $derived(
13
22
`<script>(function(){document.documentElement.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})();<` +
14
23
'/script>'
15
24
);
25
+
26
+
// Client: reactive effect for client-side navigations
27
+
$effect(() => {
28
+
if (!browser) return;
29
+
const el = document.documentElement;
30
+
el.classList.remove(...allAccentColors, ...allBaseColors);
31
+
el.classList.add(accentColor, baseColor);
32
+
});
16
33
</script>
17
34
18
35
<svelte:head>