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', '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
18 const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c');
19
20 // SSR: inline script for initial page load (no FOUC)
21 let script = $derived(
22 `<script>(function(){document.documentElement.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})();<` +
23 '/script>'
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 });
33</script>
34
35<svelte:head>
36 {@html script}
37</svelte:head>