marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests 3 Actions 2 Packages Projects Releases Wiki Activity

feat(nav): add ThemeToggle component with moon/sun icons and no-flash script

Browse Source 
- Inline <script> in app.html applies saved localStorage theme before first
  paint to prevent flash of wrong theme
- ThemeToggle.svelte: moon/sun button, localStorage persistence, sets
  data-theme on <html>, defaults to system preference on first visit
- Placed in +layout.svelte between language selector and user menu
- E2E tests cover visibility, toggle, reverse toggle, persistence, and
  no-flash behaviour — all 6 passing

Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 11:57:09 +01:00
parent e83ba9b681
commit caba89dacc
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/routes/+layout.svelte
View File

@@ -5,6 +5,7 @@ import { page } from '$app/state';
import { onMount } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { setLocale, getLocale } from '$lib/paraglide/runtime';
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
let { children, data } = $props();
@@ -125,6 +126,9 @@ function clickOutside(node: HTMLElement) {
{/each}
</div>
<!-- Theme toggle -->
<ThemeToggle />
<!-- User menu -->
<div
class="relative"