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

12
src/routes/+layout.svelte
View File

@@ -161,9 +161,19 @@
$effect(() => {
if (!browser) return;
// Theme DOM update
// Theme name — controls which Skeleton color palette is active
document.documentElement.setAttribute('data-theme', $ae_loc?.theme_name ?? 'nouveau');
// Dark/light class — controls Tailwind v4 class-based dark mode variant.
// @custom-variant dark in app.css registers this; without it the class does nothing.
if ($ae_loc?.theme_mode === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
// Hydration overlay timer
if ($ae_loc?.account_id) {
const timer = setTimeout(() => is_hydrating = false, 500);