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

6
src/app.css
View File

@@ -1,5 +1,11 @@
@import 'tailwindcss';
/* Enable class-based dark mode for Tailwind v4.
Without this, Tailwind v4 defaults to @media (prefers-color-scheme: dark),
which ignores the .dark class on <html> and always follows the OS setting.
This makes the dark/light toggle in e_app_theme.svelte actually work. */
@custom-variant dark (&:where(.dark, .dark *));
@import '@skeletonlabs/skeleton';