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>
2026-04-06 13:23:15 +07:00
parent 1c7166adc5
commit 80e02030d6
25 changed files with 415 additions and 339 deletions
@@ -4,6 +4,14 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			(function() {
+				var t = localStorage.getItem('theme');
+				if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+					document.documentElement.classList.add('dark');
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">