marcel/familienarchiv
1
0
Fork 0
Code Issues 112 Pull Requests Actions 1 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

6
frontend/src/app.html
View File

@@ -3,6 +3,12 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
(function () {
var t = localStorage.getItem('theme');
if (t === 'dark' || t === 'light') document.documentElement.setAttribute('data-theme', t);
})();
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">