/* ===================================================================== theme.css — DARK MODE Fundament (Single Source of Truth) --------------------------------------------------------------------- Wird von ALLEN Seiten geladen (auch den eigenständigen Modul-Seiten, die kein main.css einbinden). Definiert die semantischen Theme- Variablen, die überall verwendet werden. Drei Modi gesteuert über das Attribut : - "light" → helle Werte (Default :root) - "dark" → forciert dunkel - "system" → folgt dem Betriebssystem (prefers-color-scheme) Marken- und Statusfarben (--blue, --warning, grün/rot …) bleiben unverändert und werden weiterhin in main.css / pro Seite definiert. ===================================================================== */ :root { /* Helle Standardwerte */ --bg: #f0f2f5; /* Seitenhintergrund (body) */ --surface: #ffffff; /* Karten, Modals, Tabs, Eingaben */ --surface-2: #f7f9ff; /* leicht abgesetzte Flächen / Hover */ --text: #333333; /* Haupttext */ --text-muted: #666666; /* Sekundär-/Hilfetext */ --border: #dddddd; /* Rahmen, Trennlinien */ --shadow: rgba(0, 0, 0, 0.08); /* Marken-Akzent als Variable, damit er im Dark Mode aufgehellt werden kann (bessere Lesbarkeit auf dunklem Grund). */ --accent: var(--blue, #004581); color-scheme: light; } /* Dunkle Werte – einmal definiert, von beiden Auslösern genutzt ("dark" = forciert, "system" + OS-Dunkel = automatisch). */ :root[data-theme="dark"] { --bg: #121417; --surface: #1c1f24; --surface-2: #23262d; --text: #e6e8eb; --text-muted: #b4bcc4; --border: #343a40; --shadow: rgba(0, 0, 0, 0.5); --accent: #4d94ff; color-scheme: dark; /* Marken-/Statusfarben für dunklen Grund aufgehellt. Balanciert: gut lesbar als Text auf dunkel UND weißer Text auf farbigem Button bleibt akzeptabel. */ --blue: #3b82f6; --clean: #3d9bd6; --purple: #b06fd0; --open-dark: #43a047; --close-dark: #e35650; --warning: #f5b041; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg: #121417; --surface: #1c1f24; --surface-2: #23262d; --text: #e6e8eb; --text-muted: #b4bcc4; --border: #343a40; --shadow: rgba(0, 0, 0, 0.5); --accent: #4d94ff; color-scheme: dark; --blue: #3b82f6; --clean: #3d9bd6; --purple: #b06fd0; --open-dark: #43a047; --close-dark: #e35650; --warning: #f5b041; } } /* Sanfter Übergang beim Umschalten. */ html[data-theme] body, html[data-theme] .card, html[data-theme] .modal { transition: background-color 0.2s ease, color 0.2s ease; } /* 3-Wege-Schalter "Apariencia" (Panel del empleado) */ .theme-switch { display: flex; gap: 6px; margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; } .theme-option { flex: 1; cursor: pointer; border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 8px 6px; border-radius: 7px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .theme-option:hover { color: var(--text); } .theme-option--active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px var(--shadow); } /* ===================================================================== Dark-Mode Sicherheitsnetz --------------------------------------------------------------------- Greift auf ALLEN Seiten für Elemente, die sonst (Browser-Default oder nicht umgestellte Inline-Styles) hell blieben. Bewusst niedrige Spezifität, damit gezielte Seiten-Regeln Vorrang behalten. Gilt für "dark" (forciert) UND "system" + OS-Dunkel. ===================================================================== */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--surface); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] ::placeholder { color: var(--text-muted); opacity: 1; } :root[data-theme="dark"] hr { border-color: var(--border); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] input, :root[data-theme="system"] select, :root[data-theme="system"] textarea { background-color: var(--surface); color: var(--text); border-color: var(--border); } :root[data-theme="system"] ::placeholder { color: var(--text-muted); opacity: 1; } :root[data-theme="system"] hr { border-color: var(--border); } }