Saving wrap up notes for the night.

documentation/AE__UI_Component_Patterns.md

@@ -382,3 +382,33 @@ Replace all `text-gray-*` patterns with opacity wrappers on inherited text color
 | Icon used as bullet point | `aria-hidden="true"` on icon |
 
 **Never use `<i>` tags.** Always `<span class="fas ...">`.
+
+---
+
+## 16. Native `<select>` Dark Mode
+
+Browser-native `<select>` and `<option>` elements **cannot be reliably styled** with Tailwind `dark:` utilities — the browser controls `<option>` rendering and ignores most CSS overrides. This causes the "light on light hover" bug in dark mode.
+
+**Fix — add `color-scheme` directive to force OS-level dark styling:**
+
+```svelte
+<script>
+    import { ae_loc } from '$lib/ae_core/ae_stores';
+</script>
+
+<!-- Forces browser to render the select widget in dark/light OS mode matching your theme -->
+<select
+    class="select text-xs p-1"
+    style:color-scheme={$ae_loc.dark_mode ? 'dark' : 'light'}
+>
+    {#each options as opt}
+        <option value={opt.value}>{opt.label}</option>
+    {/each}
+</select>
+```
+
+**Why this works:** `color-scheme: dark` instructs the browser to use its native dark-mode widget rendering (dark `<select>`, dark `<option>` backgrounds). It's the only cross-browser mechanism that affects `<option>` hover colors.
+
+**Alternative — replace with custom Skeleton/Flowbite component** if you need full styling control (e.g., color-coded options, icons). Native `<select>` is acceptable for simple purpose dropdowns with the `color-scheme` fix above.
+
+**Store reference:** `$ae_loc.dark_mode` — boolean, set by the theme engine in `ae_stores.ts`.