Add light/dark mode toggle across all pages

- Theme store with localStorage persistence and system preference detection
- Inline script in app.html to prevent flash of wrong theme
- Sun/moon toggle button in top bar and auth pages
- Tailwind v4 dark mode via @custom-variant with class strategy
- Dark mode classes applied to all 20+ pages: sidebar, auth forms,
  dashboard, companies, projects, expenses, budget, categories,
  reports, import, settings, admin pages, and all modals

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-06 13:23:15 +07:00
parent 1c7166adc5
commit 80e02030d6
25 changed files with 415 additions and 339 deletions
+6 -1
View File
@@ -1,8 +1,13 @@
<script lang="ts">
import ThemeToggle from '$lib/components/layout/ThemeToggle.svelte';
let { children } = $props();
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50">
<div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
<div class="absolute top-4 right-4">
<ThemeToggle />
</div>
<div class="w-full max-w-md">
{@render children()}
</div>