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

[UI] Fix native browser controls dark mode (color-scheme sync)

Browse Source 
Add html.dark/html.light color-scheme rules to app.css so native controls
(select dropdowns, scrollbars, date pickers) follow the app's class-based
dark mode rather than the OS theme.
This commit is contained in:
Scott Idem
2026-03-10 11:28:17 -04:00
parent a955fad891
commit 01316789c6
1 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@@ -6,6 +6,12 @@
This makes the dark/light toggle in e_app_theme.svelte actually work. */
@custom-variant dark (&:where(.dark, .dark *));
/* Sync native browser control rendering (select dropdowns, scrollbars, etc.)
with the app's dark/light mode toggle. Without this, native controls follow
the OS theme rather than the app's .dark/.light class on <html>. */
html.dark { color-scheme: dark; }
html.light { color-scheme: light; }
@import '@skeletonlabs/skeleton';