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/App.css

@@ -119,9 +119,103 @@ select.input-text {
   cursor: pointer;
 }
 
-select.input-text option {
-  background-color: var(--app-input-bg);
-  color: var(--app-input-text);
+.themed-select {
+  position: relative;
+  width: 100%;
+}
+
+.themed-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  text-align: left;
+  width: 100%;
+}
+
+.themed-select-chevron {
+  flex-shrink: 0;
+  opacity: 0.75;
+  transition: transform 0.2s ease;
+}
+
+.themed-select.is-open .themed-select-chevron {
+  transform: rotate(180deg);
+}
+
+.themed-select-menu {
+  position: absolute;
+  z-index: 120;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  border: 1px solid var(--app-input-border);
+  border-radius: var(--app-radius-input);
+  box-shadow: var(--app-card-shadow);
+  max-height: 240px;
+  overflow-y: auto;
+  isolation: isolate;
+}
+
+html.scheme-light .themed-select-menu {
+  background: #ffffff;
+  color: #0f172a;
+}
+
+html.scheme-dark .themed-select-menu {
+  background: #1c1c1e;
+  color: #f8fafc;
+}
+
+.themed-select-option {
+  padding: 10px 12px;
+  border-radius: calc(var(--app-radius-input) - 2px);
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+html.scheme-light .themed-select-option {
+  color: #0f172a;
+  -webkit-text-fill-color: #0f172a;
+}
+
+html.scheme-dark .themed-select-option {
+  color: #f8fafc;
+  -webkit-text-fill-color: #f8fafc;
+}
+
+.themed-select-option:hover {
+  background: var(--app-accent-bg);
+}
+
+html.scheme-light .themed-select-option:hover {
+  color: var(--app-accent);
+  -webkit-text-fill-color: var(--app-accent);
+}
+
+html.scheme-dark .themed-select-option:hover {
+  color: var(--app-accent-light);
+  -webkit-text-fill-color: var(--app-accent-light);
+}
+
+.themed-select-option.is-selected {
+  background: var(--app-accent-bg);
+  font-weight: 600;
+}
+
+html.scheme-light .themed-select-option.is-selected {
+  color: var(--app-accent);
+  -webkit-text-fill-color: var(--app-accent);
+}
+
+html.scheme-dark .themed-select-option.is-selected {
+  color: var(--app-accent-light);
+  -webkit-text-fill-color: var(--app-accent-light);
 }
 
 .input-textarea {

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>
+  )
+}