/* ========================================================================= DataPilot – zentrales Theme / Dark Mode ------------------------------------------------------------------------- Jede Seite erbt von base.html.twig und definiert dort inline ein eigenes :root{ --bg … } (Light). Diese Datei überschreibt dieselben Variablen für Dark Mode mit HÖHERER Spezifität (html[data-theme="dark"] = 0,1,1 schlägt :root = 0,1,0), egal in welcher Reihenfolge die Stylesheets laden. Der Light/Dark-Zustand wird IMMER explizit als data-theme am gesetzt (No-Flash-Skript in base.html.twig, aus localStorage oder System-Präferenz) — deshalb genügt hier ein einziger [data-theme="dark"]-Block ohne Media- Query-Duplikate. Die wenigen hart codierten Hell-Farben aus den Templates fangen wir darunter gezielt ab. ========================================================================= */ html[data-theme="dark"]{ --bg:#0f1115; --surface:#171a21; --sidebar:#13161c; --border:#262b35; --border-strong:#333a47; --text:#e7e9ee; --muted:#9aa1ad; --faint:#6b7280; --accent:#6d76f7; --accent-hover:#828bff; --accent-weak:#23263d; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5); } /* sanfter Übergang NUR während des aktiven Umschaltens (Klasse wird kurz gesetzt) — so bleiben die element-eigenen Hover-Transitions im Normalbetrieb unangetastet. */ html.theme-anim body, html.theme-anim body *{ transition:background-color .2s ease, border-color .2s ease, color .2s ease !important; } /* ---- gezielte Korrekturen für hart codierte Hell-Farben ---- */ html[data-theme="dark"]{ color-scheme:dark; /* native Scrollbars/Formfelder dunkel */ } /* Weiße Formfelder abdunkeln. !important, weil viele Admin-Seiten (z.B. /admin/entities) den Hintergrund per INLINE-style="…background:#fff…" setzen — Inline schlägt sonst jede Stylesheet-Regel. Farbe/Rahmen laufen dort bereits über Variablen und passen sich an. */ html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-theme="dark"] textarea, html[data-theme="dark"] select{ background-color:#1b1f27 !important; color:var(--text); border-color:var(--border); } /* Readonly-Felder, die bewusst recessed (var(--bg)) sind, etwas dunkler halten */ html[data-theme="dark"] input[readonly]{ background-color:#13161c !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--faint); } /* Tabellen-Hover (admin: #fcfcfd) */ html[data-theme="dark"] tbody tr:hover td{ background:rgba(255,255,255,.035); } /* Inline-Code (#f1f1f4) in Chat + Admin */ html[data-theme="dark"] .bubble code, html[data-theme="dark"] code{ background:#262b35; color:#e7e9ee; } /* Blockquote / Hinweis-Box (heller Indigo-Text #3730a3) */ html[data-theme="dark"] .bubble blockquote{ color:#c7d2fe; } html[data-theme="dark"] .hint{ color:#c7d2fe; } /* Karten-/Preview-Untergründe (#fcfcfd) */ html[data-theme="dark"] .echip-preview, html[data-theme="dark"] .infocard .ic-foot{ background:var(--sidebar); } /* Status-Boxen & -Chips (helle Pastelltöne in vielen Templates: flash/pill/st/due/turn-err) — nach Bedeutung in dunkle Tints überführt. Border mit, damit kein heller Rahmen übrig bleibt. */ /* grün / Erfolg */ html[data-theme="dark"] .flash.success, html[data-theme="dark"] .flash.ok, html[data-theme="dark"] .pill.on, html[data-theme="dark"] .st.sent{ background:rgba(34,197,94,.13) !important; color:#86efac !important; border-color:rgba(34,197,94,.3) !important; } /* rot / Fehler */ html[data-theme="dark"] .flash.error, html[data-theme="dark"] .pill.err, html[data-theme="dark"] .st.failed, html[data-theme="dark"] .due.over, html[data-theme="dark"] .turn-err{ background:rgba(239,68,68,.13) !important; color:#fca5a5 !important; border-color:rgba(239,68,68,.3) !important; } /* orange / Warnung */ html[data-theme="dark"] .pill.warn, html[data-theme="dark"] .due.today{ background:rgba(245,158,11,.14) !important; color:#fcd34d !important; border-color:rgba(245,158,11,.32) !important; } /* grau / gedämpft */ html[data-theme="dark"] .pill.muted, html[data-theme="dark"] .pill.off, html[data-theme="dark"] .st.rejected{ background:rgba(255,255,255,.06) !important; color:var(--faint) !important; border-color:var(--border) !important; } /* token-Box (admin: heller Türkis auf dunkel) bleibt bewusst dunkel — schon ok */ /* Web-Suche-Badge (helles Grün) */ html[data-theme="dark"] .webbadge{ background:rgba(34,197,94,.13); color:#86efac; border-color:rgba(34,197,94,.3); } /* Inline-Entitäts-Chips: helle Pastelltöne → dunkle Tints mit hellem Text */ html[data-theme="dark"] .echip--indigo{ --ec-bg:#23263d; --ec-fg:#a5b4fc; --ec-bd:#343a63; } html[data-theme="dark"] .echip--green{ --ec-bg:#15281d; --ec-fg:#86efac; --ec-bd:#1f3d2c; } html[data-theme="dark"] .echip--orange{ --ec-bg:#2c1e12; --ec-fg:#fdba74; --ec-bd:#43301b; } html[data-theme="dark"] .echip--cyan{ --ec-bg:#10262b; --ec-fg:#67e8f9; --ec-bd:#1b3b42; } html[data-theme="dark"] .echip--pink{ --ec-bg:#2b1622; --ec-fg:#f9a8d4; --ec-bd:#43233a; } html[data-theme="dark"] .echip--slate{ --ec-bg:#1f242d; --ec-fg:#cbd5e1; --ec-bd:#333a47; } /* Status-/Erfolgsfarben aus Listen (grüner „gesendet"-Text) bleiben lesbar */ html[data-theme="dark"] .on{ color:#4ade80; } html[data-theme="dark"] .off{ color:#f87171; } /* ========================================================================= Theme-Umschalter (per /js/theme.js in header.right eingehängt; Fallback: schwebender Button unten rechts). Eigenständig gestaltet, damit er ohne seitenspezifisches CSS überall passt — in Light und Dark. ========================================================================= */ .theme-toggle{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--muted); cursor:pointer; padding:0; transition:.14s; -webkit-appearance:none; appearance:none; } .theme-toggle:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-weak); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .ic-moon{ display:block; } .theme-toggle .ic-sun{ display:none; } html[data-theme="dark"] .theme-toggle .ic-moon{ display:none; } html[data-theme="dark"] .theme-toggle .ic-sun{ display:block; } .theme-toggle.theme-toggle--float{ position:fixed; right:16px; bottom:16px; z-index:90; width:42px; height:42px; border-radius:50%; box-shadow:var(--shadow); right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); }