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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user