feat: add theme toggle to preferences settings

This commit is contained in:
Frederic Cabassut
2026-03-21 08:47:20 +01:00
committed by Fred Cabassut
parent 99210afb30
commit 14d7c2d52c
@@ -9,6 +9,22 @@
<div class="space-y-8">
<h2 class="text-xl font-bold text-[var(--text)]">Preferences</h2>
<!-- Theme -->
<div class="space-y-2">
<span class="block text-sm font-medium text-[var(--text)]">Theme</span>
<div class="flex gap-1" role="group" aria-label="Theme">
{#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
<button
onclick={() => updatePreference('theme', value)}
class="rounded-sm border px-4 py-2 text-sm transition-colors {prefs.theme === value ? 'border-[var(--primary)] bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'border-[var(--border-subtle)] text-[var(--text)] hover:border-[var(--primary)]'}"
data-testid="pref-theme-{value}"
>
{label}
</button>
{/each}
</div>
</div>
<!-- Default note mode -->
<div class="space-y-2">
<span class="block text-sm font-medium text-[var(--text)]">Default note mode</span>