atmo.rsvp
1<script lang="ts">
2 import { browser } from '$app/environment';
3
4 let {
5 accentColor = 'cyan',
6 baseColor = 'mist'
7 }: {
8 accentColor?: string;
9 baseColor?: string;
10 } = $props();
11
12 const allAccentColors = [
13 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
14 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple',
15 'fuchsia', 'pink', 'rose'
16 ];
17 const allBaseColors = [
18 'gray', 'stone', 'zinc', 'neutral', 'slate', 'mist', 'sand',
19 'olive', 'mauve', 'sage'
20 ];
21
22 const allColors = [...allAccentColors, ...allBaseColors];
23
24 const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c');
25
26 // SSR: inline script that removes all color classes then adds the correct ones before paint
27 const allColorsJson = JSON.stringify(allColors);
28
29 let script = $derived(
30 `<script>(function(){var e=document.documentElement,r=${allColorsJson};r.forEach(function(c){e.classList.remove(c)});e.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})()<` +
31 '/script>'
32 );
33
34 // Client: reactive effect for client-side navigations
35 $effect(() => {
36 if (!browser) return;
37 const el = document.documentElement;
38 el.classList.remove(...allColors);
39 el.classList.add(accentColor, baseColor);
40
41 return () => {
42 el.classList.remove(...allColors);
43 el.classList.add('cyan', 'mist');
44 };
45 });
46</script>
47
48<svelte:head>
49 {@html script}
50</svelte:head>