your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { Paragraph } from '@foxui/core';
3 import { ColorSelect } from '@foxui/colors';
4
5 let accentColors = [
6 { class: 'text-red-500', label: 'red' },
7 { class: 'text-orange-500', label: 'orange' },
8 { class: 'text-amber-500', label: 'amber' },
9 { class: 'text-yellow-500', label: 'yellow' },
10 { class: 'text-lime-500', label: 'lime' },
11 { class: 'text-green-500', label: 'green' },
12 { class: 'text-emerald-500', label: 'emerald' },
13 { class: 'text-teal-500', label: 'teal' },
14 { class: 'text-cyan-500', label: 'cyan' },
15 { class: 'text-sky-500', label: 'sky' },
16 { class: 'text-blue-500', label: 'blue' },
17 { class: 'text-indigo-500', label: 'indigo' },
18 { class: 'text-violet-500', label: 'violet' },
19 { class: 'text-purple-500', label: 'purple' },
20 { class: 'text-fuchsia-500', label: 'fuchsia' },
21 { class: 'text-pink-500', label: 'pink' },
22 { class: 'text-rose-500', label: 'rose' }
23 ];
24
25 let baseColors = [
26 { class: 'text-gray-500', label: 'gray' },
27 { class: 'text-stone-500', label: 'stone' },
28 { class: 'text-zinc-500', label: 'zinc' },
29 { class: 'text-neutral-500', label: 'neutral' },
30 { class: 'text-slate-500', label: 'slate' }
31 ];
32
33 let {
34 accentColor = $bindable('pink'),
35 baseColor = $bindable('stone'),
36 selectAccentColor = true,
37 selectBaseColor = true,
38 onchanged
39 }: {
40 accentColor?: string;
41 baseColor?: string;
42 selectAccentColor?: boolean;
43 selectBaseColor?: boolean;
44 onchanged?: (accentColor: string, baseColor: string) => void;
45 } = $props();
46
47 let selectedAccentColor = $derived(
48 accentColors.find((c) => c.label === accentColor) ?? accentColors[15]
49 );
50
51 let selectedBaseColor = $derived(baseColors.find((c) => c.label === baseColor) ?? baseColors[1]);
52</script>
53
54{#if selectAccentColor}
55 <Paragraph class="mb-2">Accent Color</Paragraph>
56 <ColorSelect
57 selected={selectedAccentColor}
58 colors={accentColors}
59 onselected={(color, previous) => {
60 if (typeof previous === 'string' || typeof color === 'string') {
61 return;
62 }
63
64 document.documentElement.classList.remove(previous.label.toLowerCase());
65 document.documentElement.classList.add(color.label.toLowerCase());
66
67 accentColor = color.label;
68
69 window.dispatchEvent(
70 new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
71 );
72
73 onchanged?.(accentColor, baseColor);
74 }}
75 class="w-64"
76 />
77{/if}
78
79{#if selectBaseColor}
80 <Paragraph class="mt-4 mb-2">Base Color</Paragraph>
81 <ColorSelect
82 selected={selectedBaseColor}
83 colors={baseColors}
84 onselected={(color, previous) => {
85 if (typeof previous === 'string' || typeof color === 'string') {
86 return;
87 }
88
89 document.documentElement.classList.remove(previous.label.toLowerCase());
90 document.documentElement.classList.add(color.label.toLowerCase());
91
92 baseColor = color.label;
93
94 window.dispatchEvent(
95 new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
96 );
97
98 onchanged?.(accentColor, baseColor);
99 }}
100 />
101{/if}