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

fix(sys-bar): full dark mode fix — base text color, select/input global CSS, color-scheme

Browse Source
This commit is contained in:
Scott Idem
2026-03-16 10:40:04 -04:00
parent 0d554e434d
commit 45fbf35c6b
1 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -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>