/** * Dark-Mode Body-Hintergrund — einheitlich slate-950 (blau-tönig) * Pfad: assets/css/dark-mode-theme.css * * Hintergrund: * Viele Pages haben historisch `dark:bg-gray-900` (neutrales Grau, * #111827) auf dem stehen — die Auth-/Public-Pages dagegen * `dark:bg-slate-950` (#020617, leicht bläulich). Resultat: Wechsel * zwischen Bereichen wirkt inkonsistent (mal grau, mal blau). * * Diese Override-Regel forciert auf dem einen einheitlichen * slate-950-Hintergrund im Dark-Mode — unabhängig davon, ob die Page * `dark:bg-gray-900`, `dark:bg-gray-950` oder gar nichts setzt. * * !important ist hier zulässig, weil: * - Tailwind-Utilities auf dem body-Tag haben sonst höhere Spezifität * als die globale `.dark body`-Regel in input.css * - Card-/Modal-Backgrounds nutzen andere Klassen (dark:bg-slate-800, * dark:bg-gray-800) und sind nicht betroffen * * Damit ist 23x Einzel-Edit über die Pages vermieden. */ /* Deutlich erkennbarer Blau-Ton: slate-900 statt slate-950, weil slate-950 (#020617) so dunkel ist dass es auf vielen Monitoren wie reines Schwarz wirkt. Mit slate-900 (#0F172A) sieht der User klar die blau-tönige Note ueberall. */ .dark body { background-color: #0F172A !important; /* Tailwind slate-900 — klar bläulich */ color: #f1f5f9 !important; /* slate-100 */ } /* main-Container darf transparent bleiben damit Section-Backgrounds (z.B. alternating bg-slate-50/bg-slate-100 auf der Landing-Page) sichtbar bleiben — siehe index.php Sektionen. */ .dark main { background-color: transparent !important; } /* Blog: Sections/Article verwenden im Dark-Mode die projekt-eigenen slate-Toene (--slate-900: #10161A, --slate-950: #0B0F0D) — beide wirken Schwarz-Gruenlich, nicht Blau. Damit der Blog im Dark-Mode denselben blau-toenigen Hintergrund wie Body hat, ziehen wir die Sections/Article im Blog auf transparent — der durch mein Override blau gefaerbte Body (#0F172A) scheint durch. */ .dark .blog-page section, .dark .blog-page article { background-color: transparent !important; } /* Landing-Page: Alternierende Section-Backgrounds bleiben erhalten, werden im Dark-Mode aber auf Tailwind-Standard-Blau gezogen statt das projekt-eigene schwarz-gruenliche slate. - slate-950 (#0B0F0D schwarz-gruenlich) -> #0F172A (Tailwind slate-900, blau) - slate-900 (#10161A schwarz-gruenlich) -> #1E293B (Tailwind slate-800, helleres blau) [class~="..."] matched die Klasse als ganzes Wort — keine Treffer in Cards/Modals die andere slate-Varianten nutzen. */ .dark .landing-page section[class~="dark:bg-slate-950"] { background-color: #0F172A !important; } .dark .landing-page section[class~="dark:bg-slate-900"] { background-color: #1E293B !important; } /* Defensive: Tailwind-Utility-Klassen auf haben Spezifität 0,2,0 — mein `.dark body { !important }` schlaegt das mit `!important`, aber zur Sicherheit overriden wir die haeufigsten Body-Utility-Klassen nochmal explizit (gleiche Spezifitaet wie Tailwind + !important). */ .dark body.dark\:bg-gray-900, .dark body.dark\:bg-gray-950, .dark body.dark\:bg-slate-900, .dark body.dark\:bg-slate-950 { background-color: #0F172A !important; }