Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wire up class-based dark mode for Tailwind v4

Browse Source 
- app.css: add @custom-variant dark so Tailwind v4 respects .dark class
  on <html> instead of always following OS prefers-color-scheme.
- app.html: remove hardcoded class="light" (now set dynamically).
- +layout.svelte: toggle .dark/.light on <html> when ae_loc.theme_mode changes.
- e_app_theme.svelte: related theme toggle changes.
This commit is contained in:
Scott Idem
2026-03-06 17:32:30 -05:00
parent bdf3260c74
commit 9fc72b4671
4 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/app_components/e_app_theme.svelte
View File

@@ -149,13 +149,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
$ae_loc.theme_mode = 'light';
}
if ($ae_loc.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
// DOM sync is handled reactively by the layout effect in +layout.svelte
}}
title="Change light and dark mode"
>