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