Match system theme
Automatically switch theme when your OS switches between light and dark
{#if store.settings.systemThemeSync}
Dark theme
toggleSelect("sync-dark")}>
{allThemeOptions.find(o => o.id === (store.settings.systemThemeDark ?? "dark"))?.label ?? "Original"}
{#if selectOpen === "sync-dark" || closingSelect === "sync-dark"}
{#each allThemeOptions as opt}
{ updateSettings({ systemThemeDark: opt.id }); mountSystemThemeSync(); toggleSelect("sync-dark"); }}> {opt.label}
{/each}
{/if}
Light theme
toggleSelect("sync-light")}>
{allThemeOptions.find(o => o.id === (store.settings.systemThemeLight ?? "light"))?.label ?? "Light"}
{#if selectOpen === "sync-light" || closingSelect === "sync-light"}
{#each allThemeOptions as opt}
{ updateSettings({ systemThemeLight: opt.id }); mountSystemThemeSync(); toggleSelect("sync-light"); }}> {opt.label}
{/each}
{/if}
{/if}
Theme
{#each THEMES as theme} {@const active = (store.settings.theme ?? "dark") === theme.id}
updateSettings({ theme: theme.id })} title={theme.description}>
{theme.label}
{theme.description}
{#if active}
✓
{/if}
{/each} {#each store.settings.customThemes ?? [] as custom} {@const active = store.settings.theme === custom.id}
onOpenThemeEditor?.(custom.id)} title="Edit theme">
{ if (confirm(`Delete theme "${custom.name}"?`)) deleteCustomTheme(custom.id); }} title="Delete theme">
updateSettings({ theme: custom.id })} title="Apply {custom.name}">
{custom.name}
Custom
{#if active}
✓
{/if}
{/each}
onOpenThemeEditor?.(null)} title="Create a custom theme">
New Theme
Create custom