From 80e02030d68492f335af432fd44c3fbad09fd7d4 Mon Sep 17 00:00:00 2001 From: grabowski Date: Mon, 6 Apr 2026 13:23:15 +0700 Subject: [PATCH] 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) --- src/app.css | 2 + src/app.html | 8 ++ src/lib/components/layout/Sidebar.svelte | 22 ++-- src/lib/components/layout/ThemeToggle.svelte | 19 +++ src/lib/stores/theme.svelte.ts | 40 ++++++ src/routes/(app)/+layout.svelte | 12 +- src/routes/(app)/admin/settings/+page.svelte | 18 +-- src/routes/(app)/admin/users/+page.svelte | 42 +++---- src/routes/(app)/companies/+page.svelte | 56 ++++----- .../companies/[companyId]/+layout.svelte | 8 +- .../(app)/companies/[companyId]/+page.svelte | 46 +++---- .../companies/[companyId]/budget/+page.svelte | 116 +++++++++--------- .../[companyId]/categories/+page.svelte | 20 +-- .../[companyId]/expenses/+page.svelte | 30 ++--- .../companies/[companyId]/import/+page.svelte | 40 +++--- .../[companyId]/projects/+page.svelte | 20 +-- .../projects/[projectId]/+page.svelte | 42 +++---- .../[projectId]/expenses/new/+page.svelte | 34 ++--- .../[companyId]/projects/new/+page.svelte | 16 +-- .../[companyId]/reports/+page.svelte | 38 +++--- .../[companyId]/settings/+page.svelte | 40 +++--- src/routes/(app)/dashboard/+page.svelte | 28 ++--- src/routes/(auth)/+layout.svelte | 7 +- src/routes/(auth)/login/+page.svelte | 24 ++-- src/routes/(auth)/signup/+page.svelte | 26 ++-- 25 files changed, 415 insertions(+), 339 deletions(-) create mode 100644 src/lib/components/layout/ThemeToggle.svelte create mode 100644 src/lib/stores/theme.svelte.ts diff --git a/src/app.css b/src/app.css index d4b5078..5b73331 100644 --- a/src/app.css +++ b/src/app.css @@ -1 +1,3 @@ @import 'tailwindcss'; + +@custom-variant dark (&:where(.dark, .dark *)); diff --git a/src/app.html b/src/app.html index 77a5ff5..dd432c4 100644 --- a/src/app.html +++ b/src/app.html @@ -4,6 +4,14 @@ + %sveltekit.head% diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 26d7cef..c977fbc 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -12,20 +12,20 @@