/* Mantik-Theme-Tokens + Toggle-Button - shared Asset. CSS-Variablen mit Light-Default. Dark wird via [data-theme="dark"] auf aktiviert; ohne data-theme greift prefers-color-scheme. Verwendung: (vor app.css) App-eigenes CSS verwendet die Variablen, nicht hartkodierte Farben. */ :root { /* Neutrale Farben (Light) */ --bg: #fafaf7; --bg-alt: #ffffff; --bg-soft: #f4f3ed; --ink: #18181b; --ink-soft: #52525b; --ink-muted: #8b8b94; --line: #e4e3de; --line-soft: #efeee8; /* Akzent */ --accent: #0f3a4d; --accent-dark: #0a2a38; --accent-soft: #e6eff2; /* Status (rot-gruen-schwaeche-freundlich: Vorzeichen + Icon ergaenzt Farbe) */ --good: #1f7a4d; --bad: #b84545; --warn: #b07020; /* Aliase: aeltere Apps + das Schema-Template verwenden diese Namen. Niemals auf 'transparent' fallenlassen - sonst werden Drawer/Cards/ Borders unsichtbar (Bug 2026-05-20). */ --surface: var(--bg-alt); --border: var(--line); --muted: var(--ink-muted); color-scheme: light; } [data-theme="dark"] { --bg: #0f1115; --bg-alt: #171a20; --bg-soft: #1d2027; --ink: #e7e8ea; --ink-soft: #a8acb5; --ink-muted: #6e737d; --line: #2a2e36; --line-soft: #22252c; --accent: #7cc4d6; --accent-dark: #5fa9bd; --accent-soft: #1a2b34; --good: #6ad06a; --bad: #e36868; --warn: #e0a554; --surface: var(--bg-alt); --border: var(--line); --muted: var(--ink-muted); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1115; --bg-alt: #171a20; --bg-soft: #1d2027; --ink: #e7e8ea; --ink-soft: #a8acb5; --ink-muted: #6e737d; --line: #2a2e36; --line-soft: #22252c; --accent: #7cc4d6; --accent-dark: #5fa9bd; --accent-soft: #1a2b34; --good: #6ad06a; --bad: #e36868; --warn: #e0a554; --surface: var(--bg-alt); --border: var(--line); --muted: var(--ink-muted); color-scheme: dark; } } /* Embedded-Modus: Wenn die WebApp im GTK-Shell geladen wird (URL-Parameter ?embedded=1), liefert die GTK-HeaderBar bereits Theme-Toggle und andere Aktion-Buttons. Der HTML-Header der App selbst wird dann weggelassen. */ [data-embedded="1"] body > header { display: none; } /* Toggle-Button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-soft); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; } .theme-icon-sun { display: none; } .theme-icon-moon { display: inline-block; } [data-theme="dark"] .theme-icon-sun { display: inline-block; } [data-theme="dark"] .theme-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-sun { display: inline-block; } :root:not([data-theme="light"]) .theme-icon-moon { display: none; } }