From 01316789c68cf9c8508bcfa95f6bd086c9fc2d26 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Tue, 10 Mar 2026 11:28:17 -0400 Subject: [PATCH] [UI] Fix native browser controls dark mode (color-scheme sync) 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. --- src/app.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app.css b/src/app.css index fdccf679..1c20cb4a 100644 --- a/src/app.css +++ b/src/app.css @@ -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.dark { color-scheme: dark; } +html.light { color-scheme: light; } + @import '@skeletonlabs/skeleton';