iu
1f0e909ffd
- make neutral theme a warm dark graphite - order switches as dark -> neutral -> light -> system - replace neutral icon with contrast glyph
30 lines
907 B
Svelte
30 lines
907 B
Svelte
<script lang="ts">
|
|
import IconButton from './IconButton.svelte';
|
|
import type { IconName } from '$lib/icons/registry';
|
|
import { theme, type Theme } from '$lib/stores/theme.svelte';
|
|
|
|
const options: { value: Theme; label: string; icon: IconName }[] = [
|
|
{ value: 'dark', label: 'Dark', icon: 'dark_mode' },
|
|
{ value: 'neutral', label: 'Neutral', icon: 'contrast' },
|
|
{ value: 'light', label: 'Light', icon: 'light_mode' },
|
|
{ value: 'system', label: 'System', icon: 'brightness_auto' }
|
|
];
|
|
</script>
|
|
|
|
<div
|
|
class="border-border bg-bg-elevated inline-flex gap-1 rounded-lg border p-1"
|
|
role="group"
|
|
aria-label="Theme"
|
|
>
|
|
{#each options as option (option.value)}
|
|
<IconButton
|
|
name={option.icon}
|
|
label={option.label}
|
|
active={theme.current === option.value}
|
|
pressed={theme.current === option.value}
|
|
class="px-2 py-1 text-sm"
|
|
onclick={() => theme.set(option.value)}
|
|
/>
|
|
{/each}
|
|
</div>
|