rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Dark Mode — System/Hell/Dunkel-Toggle in Einstellungen

Browse source 
CSS-Variablen für Dark Mode in design-system.css (system + manuell via
data-theme), Flash-freies Inline-Script in index.html, Toggle in
settings.js (by_theme in localStorage). SW by-v210, APP_VER 179.
This commit is contained in:
rene 2026-04-18 18:40:34 +02:00
parent eb72d6f675
commit eb3f7b94b2
4 changed files with 112 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

69
backend/static/css/design-system.css
View file

@ -115,21 +115,70 @@
--safe-right: env(safe-area-inset-right, 0px);
}
/* Dark Mode — vorbereitet, nicht aktiv */
/* Dark Mode — System-Präferenz (nur wenn kein manuelles Theme gesetzt) */
@media (prefers-color-scheme: dark) {
:root {
--c-bg: #1A1410;
--c-surface: #241C14;
--c-surface-2: #2E2418;
--c-surface-3: #3A2E20;
--c-border: #4A3C2C;
--c-border-light: #3A2E20;
--c-text: #F0EAE0;
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--c-bg: #1A1410;
--c-surface: #241C14;
--c-surface-2: #2E2418;
--c-surface-3: #3A2E20;
--c-border: #4A3C2C;
--c-border-light: #3A2E20;
--c-primary-subtle: #2A1C0A;
--c-primary-soft: #2E1E08;
--c-nature-subtle: #1A2214;
--c-sky-subtle: #141C22;
--c-danger-subtle: #2A100A;
--c-success-subtle: #122010;
--c-warning-subtle: #261A08;
--c-info-subtle: #10182A;
--c-text: #F0EAE0;
--c-text-secondary: #C0B0A0;
--c-text-muted: #806A58;
--c-text-muted: #806A58;
--c-text-inverse: #2A1F14;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30);
--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.50), 0 8px 16px rgba(0, 0, 0, 0.35);
}
}
/* Manuelles Dark-Theme via data-theme="dark" (überschreibt auch prefers-color-scheme: light) */
:root[data-theme="dark"] {
--c-bg: #1A1410;
--c-surface: #241C14;
--c-surface-2: #2E2418;
--c-surface-3: #3A2E20;
--c-border: #4A3C2C;
--c-border-light: #3A2E20;
--c-primary-subtle: #2A1C0A;
--c-primary-soft: #2E1E08;
--c-nature-subtle: #1A2214;
--c-sky-subtle: #141C22;
--c-danger-subtle: #2A100A;
--c-success-subtle: #122010;
--c-warning-subtle: #261A08;
--c-info-subtle: #10182A;
--c-text: #F0EAE0;
--c-text-secondary: #C0B0A0;
--c-text-muted: #806A58;
--c-text-inverse: #2A1F14;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30);
--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.50), 0 8px 16px rgba(0, 0, 0, 0.35);
}
/* ------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------ */