fix: Einstellungs-Dropdowns durch ThemedSelect mit lesbarem Kontrast ersetzen.

Native Select-Optionen waren in Light/Dark Mode schlecht lesbar; ein eigenes Dropdown steuert Hintergrund und Textfarbe zuverlässig.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/SettingsForm.tsx

@@ -6,6 +6,7 @@ import AccountDangerZone from './AccountDangerZone.tsx'
 import PwaInstallPrompt from './PwaInstallPrompt.tsx'
 import { useDialog } from './ModalDialog.tsx'
 import { notifyAppearanceChanged } from '../services/appearance.js'
+import ThemedSelect from './ThemedSelect.tsx'
 
 interface SettingsFormProps {
   logbookId?: string | null
@@ -326,18 +327,18 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           </p>
 
           <div className="input-group">
-            <select
+            <ThemedSelect
               id="app-theme"
-              className="input-text"
               value={theme}
-              onChange={(e) => handleThemeChange(e.target.value)}
               disabled={saving}
-            >
-              <option value="auto">{t('settings.theme_auto')}</option>
-              <option value="ocean">{t('settings.theme_ocean')}</option>
-              <option value="material">{t('settings.theme_material')}</option>
-              <option value="cupertino">{t('settings.theme_cupertino')}</option>
-            </select>
+              onChange={handleThemeChange}
+              options={[
+                { value: 'auto', label: t('settings.theme_auto') },
+                { value: 'ocean', label: t('settings.theme_ocean') },
+                { value: 'material', label: t('settings.theme_material') },
+                { value: 'cupertino', label: t('settings.theme_cupertino') }
+              ]}
+            />
           </div>
         </div>
 
@@ -350,17 +351,17 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           </p>
 
           <div className="input-group">
-            <select
+            <ThemedSelect
               id="app-color-scheme"
-              className="input-text"
               value={colorScheme}
-              onChange={(e) => handleColorSchemeChange(e.target.value)}
               disabled={saving}
-            >
-              <option value="auto">{t('settings.color_scheme_auto')}</option>
-              <option value="light">{t('settings.color_scheme_light')}</option>
-              <option value="dark">{t('settings.color_scheme_dark')}</option>
-            </select>
+              onChange={handleColorSchemeChange}
+              options={[
+                { value: 'auto', label: t('settings.color_scheme_auto') },
+                { value: 'light', label: t('settings.color_scheme_light') },
+                { value: 'dark', label: t('settings.color_scheme_dark') }
+              ]}
+            />
           </div>
         </div>
 

client/src/components/ThemedSelect.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+export interface ThemedSelectOption {
+  value: string
+  label: string
+}
+
+interface ThemedSelectProps {
+  id?: string
+  value: string
+  options: ThemedSelectOption[]
+  onChange: (value: string) => void
+  disabled?: boolean
+}
+
+export default function ThemedSelect({
+  id,
+  value,
+  options,
+  onChange,
+  disabled = false
+}: ThemedSelectProps) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((option) => option.value === value)
+
+  useEffect(() => {
+    if (!open) return
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick)
+      document.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [open])
+
+  const selectOption = (nextValue: string) => {
+    onChange(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <div className={`themed-select${open ? ' is-open' : ''}`} ref={rootRef}>
+      <button
+        type="button"
+        id={id}
+        className="themed-select-trigger input-text"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => !disabled && setOpen((current) => !current)}
+      >
+        <span>{selected?.label ?? value}</span>
+        <ChevronDown size={16} className="themed-select-chevron" aria-hidden="true" />
+      </button>
+
+      {open && (
+        <ul className="themed-select-menu" role="listbox" aria-labelledby={id}>
+          {options.map((option) => (
+            <li
+              key={option.value}
+              role="option"
+              aria-selected={option.value === value}
+              className={`themed-select-option${option.value === value ? ' is-selected' : ''}`}
+              onClick={() => selectOption(option.value)}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}