From 45fbf35c6ba02d9c9ba4effe5be31131f4d35b6c Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 16 Mar 2026 10:40:04 -0400
Subject: [PATCH] =?UTF-8?q?fix(sys-bar):=20full=20dark=20mode=20fix=20?=
 =?UTF-8?q?=E2=80=94=20base=20text=20color,=20select/input=20global=20CSS,?=
 =?UTF-8?q?=20color-scheme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/app_components/e_app_sys_bar.svelte | 45 +++++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index c8073dd9..cf25b115 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -228,8 +228,7 @@
             flex flex-col items-stretch gap-0
             w-80 max-w-[94vw]
             max-h-[80vh] overflow-y-auto overflow-x-hidden
-            bg-white/85 dark:bg-gray-900/85
-            backdrop-blur-md
+            bg-white/85 dark:bg-gray-900/85            text-gray-900 dark:text-gray-100            backdrop-blur-md
             border border-gray-200/70 dark:border-gray-700/70
             rounded-xl shadow-2xl
             text-sm
@@ -389,7 +388,7 @@
                         <select
                             bind:value={$ae_loc.theme_name}
                             onchange={(e) => document.documentElement.setAttribute('data-theme', (e.target as HTMLSelectElement).value)}
-                            class="select w-full text-sm"
+                            class="select w-full text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600"
                         >
                             {#each theme_options as opt (opt.value)}
                                 <option value={opt.value}>{opt.label}</option>
@@ -666,4 +665,44 @@
         max-width: 100% !important;
         padding: 0 !important;
     }
+
+    /*
+     * Fix native browser rendering of <select> options in dark mode.
+     * Without color-scheme, the browser renders <option> elements with its
+     * default (light) chrome even on a dark background — white text on
+     * white options, or dark text on dark options.
+     * color-scheme: dark tells the browser to flip its native UI to dark.
+     * Applied globally to the panel so it covers sub-components (URL builder,
+     * access type, etc.) without touching every individual element.
+     */
+    :global(.ae_sys_panel) {
+        color-scheme: light;
+    }
+    :global(.dark .ae_sys_panel) {
+        color-scheme: dark;
+    }
+
+    /*
+     * Dark mode: Skeleton UI v3 form classes (select, input) do not carry
+     * dark-mode color tokens, so without these overrides the elements render
+     * with a light/white background and dark text — unreadable on the dark
+     * panel background. These rules force a consistent dark appearance for
+     * every select and text-type input inside the panel (sub-components
+     * included) without needing per-element dark: classes.
+     */
+    :global(.dark .ae_sys_panel select),
+    :global(.dark .ae_sys_panel option) {
+        color: rgb(243 244 246);          /* gray-100 */
+        background-color: rgb(55 65 81);  /* gray-700 */
+        border-color: rgb(75 85 99);      /* gray-600 */
+    }
+    :global(.dark .ae_sys_panel input:not([type='checkbox']):not([type='radio'])) {
+        color: rgb(243 244 246);          /* gray-100 */
+        background-color: rgb(55 65 81);  /* gray-700 */
+        border-color: rgb(75 85 99);      /* gray-600 */
+    }
+    /* Placeholder text should still be legible at reduced opacity */
+    :global(.dark .ae_sys_panel input::placeholder) {
+        color: rgb(156 163 175);           /* gray-400 */
+    }
 </style>