/* ============================================================ theme.css — zentrale Design-Tokens der Webapp Einzige Quelle der Wahrheit für Farben. Look später anpassbar: nur hier ändern, gilt überall. Startwert (v0.1): Light = reines Gelb (#FFFF00) Hintergrund, schwarze Schrift Dark = invertiert: schwarzer Hintergrund, gelbe Schrift Auswahl: - automatisch nach System (prefers-color-scheme) - manuell überschreibbar via ============================================================ */ :root { /* --- Light (Default) --- */ --color-bg: #ffff00; /* reines Gelb */ --color-text: #000000; /* schwarz */ --color-line: #000000; /* Rahmen / Linien / Trenner */ --color-muted: rgba(0, 0, 0, 0.55); /* abgeschwächte Schrift */ /* Akzent = invertiertes Paar (Buttons, Hervorhebung) */ --color-accent-bg: #000000; --color-accent-text: #ffff00; /* Reines Schwarz/Weiß als Hilfstokens (selten nötig) */ --pure-black: #000000; --pure-yellow: #ffff00; /* --- Minigame-Canvas (Survival-Look, s. PRD 6.7) --- Verfolger/Spuren/Neon bleiben Survival; ABER Hintergrund und Spieler-Icon folgen dem App-Theme (gelb/schwarz bzw. invertiert). */ --game-bg: var(--color-bg); /* folgt App-Theme: gelb / schwarz */ --game-player: var(--color-text); /* Spieler-Icon/Schiff: schwarz / gelb */ --game-line: #ffffff; /* sonstige Strukturlinien (Survival) */ --game-neon-1: #ff5028; /* rot */ --game-neon-2: #3cffa0; /* grün */ --game-neon-3: #ffc832; /* gelb */ --game-neon-4: #dc50ff; /* violett */ --game-neon-5: #ffa0dc; /* pink */ } /* Automatisch dunkel, wenn das System dunkel ist (greift nur ohne manuelle Überschreibung) */ @media (prefers-color-scheme: dark) { :root { --color-bg: #000000; --color-text: #ffff00; --color-line: #ffff00; --color-muted: rgba(255, 255, 0, 0.55); --color-accent-bg: #ffff00; --color-accent-text: #000000; } } /* Manuelle Umschaltung gewinnt über Systemvorgabe (höhere Spezifität durch :root[data-theme]) */ :root[data-theme="light"] { --color-bg: #ffff00; --color-text: #000000; --color-line: #000000; --color-muted: rgba(0, 0, 0, 0.55); --color-accent-bg: #000000; --color-accent-text: #ffff00; } :root[data-theme="dark"] { --color-bg: #000000; --color-text: #ffff00; --color-line: #ffff00; --color-muted: rgba(255, 255, 0, 0.55); --color-accent-bg: #ffff00; --color-accent-text: #000000; } /* --- Basis-Anwendung der Tokens --- */ html, body { background: var(--color-bg); color: var(--color-text); }