Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
3.0 kB · 101 lines
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102<script lang="ts"> import { Paragraph } from '@foxui/core'; import { ColorSelect } from '@foxui/colors';
let accentColors = [ { class: 'text-red-500', label: 'red' }, { class: 'text-orange-500', label: 'orange' }, { class: 'text-amber-500', label: 'amber' }, { class: 'text-yellow-500', label: 'yellow' }, { class: 'text-lime-500', label: 'lime' }, { class: 'text-green-500', label: 'green' }, { class: 'text-emerald-500', label: 'emerald' }, { class: 'text-teal-500', label: 'teal' }, { class: 'text-cyan-500', label: 'cyan' }, { class: 'text-sky-500', label: 'sky' }, { class: 'text-blue-500', label: 'blue' }, { class: 'text-indigo-500', label: 'indigo' }, { class: 'text-violet-500', label: 'violet' }, { class: 'text-purple-500', label: 'purple' }, { class: 'text-fuchsia-500', label: 'fuchsia' }, { class: 'text-pink-500', label: 'pink' }, { class: 'text-rose-500', label: 'rose' } ];
let baseColors = [ { class: 'text-gray-500', label: 'gray' }, { class: 'text-stone-500', label: 'stone' }, { class: 'text-zinc-500', label: 'zinc' }, { class: 'text-neutral-500', label: 'neutral' }, { class: 'text-slate-500', label: 'slate' } ];
let { accentColor = $bindable('pink'), baseColor = $bindable('stone'), selectAccentColor = true, selectBaseColor = true, onchanged }: { accentColor?: string; baseColor?: string; selectAccentColor?: boolean; selectBaseColor?: boolean; onchanged?: (accentColor: string, baseColor: string) => void; } = $props();
let selectedAccentColor = $derived( accentColors.find((c) => c.label === accentColor) ?? accentColors[15] );
let selectedBaseColor = $derived(baseColors.find((c) => c.label === baseColor) ?? baseColors[1]);</script>
{#if selectAccentColor} <Paragraph class="mb-2">Accent Color</Paragraph> <ColorSelect selected={selectedAccentColor} colors={accentColors} onselected={(color, previous) => { if (typeof previous === 'string' || typeof color === 'string') { return; }
document.documentElement.classList.remove(previous.label.toLowerCase()); document.documentElement.classList.add(color.label.toLowerCase());
accentColor = color.label;
window.dispatchEvent( new CustomEvent('theme-changed', { detail: { accentColor: color.label } }) );
onchanged?.(accentColor, baseColor); }} class="w-64" />{/if}
{#if selectBaseColor} <Paragraph class="mt-4 mb-2">Base Color</Paragraph> <ColorSelect selected={selectedBaseColor} colors={baseColors} onselected={(color, previous) => { if (typeof previous === 'string' || typeof color === 'string') { return; }
document.documentElement.classList.remove(previous.label.toLowerCase()); document.documentElement.classList.add(color.label.toLowerCase());
baseColor = color.label;
window.dispatchEvent( new CustomEvent('theme-changed', { detail: { baseColor: color.label } }) );
onchanged?.(accentColor, baseColor); }} />{/if}