fix(web): Dunkelvariante an die .dark-Klasse binden — 100+ dark:-Angaben waren wirkungslos
Beim Einbau des Logos fiel auf, dass dessen Plattenkontur dark:stroke-white/25 im dunklen Modus nicht griff. Die Ursache reicht weit ueber das Logo hinaus. globals.css definierte die Farbtokens unter .dark, deklarierte aber kein @custom-variant dark. In Tailwind 4 haengt die dark:-Utility-Variante per Vorgabe an prefers-color-scheme, also an der Einstellung des Betriebssystems. Die Anwendung schaltet den Modus jedoch ueber next-themes mit attribute=class. Beides lief damit auseinander: sobald ein Nutzer im Portal auf dunkel stellte, waehrend sein System hell stand, blieb JEDE dark:-Utility im Quellcode wirkungslos — ueber 100 Vorkommen in mehr als zehn Dateien, darunter Status-, Warn- und Fehlerfarben, Hinweisboxen und Badges in der Administration. Unentdeckt geblieben ist es, weil Hintergrund und Textfarbe NICHT ueber dark: laufen, sondern ueber die CSS-Variablen unter .dark. Die Oberflaeche wurde also grundsaetzlich dunkel und nur die Feinheiten fehlten. Am laufenden System in beide Richtungen gemessen. Vorher, bei html.dark und hellem System: dark:bg-gray-800 ergab transparent, dark:text-green-400 blieb ohne Wirkung. Nachher greifen beide korrekt, und im hellen Modus greifen sie weiterhin nicht — die Logo-Kontur ist dort unsichtbar, im dunklen Modus weiss mit 25 Prozent Deckkraft. 221/221 Web-Tests gruen, Typpruefung sauber. Erfasst als WINDOWS.md #13 und mit diesem Commit geschlossen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K5jtbGzC5Sf9npJ3JCjKhq
This commit is contained in:
@@ -1,5 +1,26 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/*
|
||||
* Bindet die `dark:`-Utility-Variante an die `.dark`-Klasse.
|
||||
*
|
||||
* Tailwind 4 haengt `dark:` per Vorgabe an `prefers-color-scheme`, also an die
|
||||
* Einstellung des Betriebssystems. Diese Anwendung schaltet den Modus aber ueber
|
||||
* next-themes mit `attribute="class"` (siehe app/layout.tsx) — der Nutzer waehlt
|
||||
* hell/dunkel im Portal, unabhaengig von seinem System.
|
||||
*
|
||||
* Ohne diese Zeile klaffte beides auseinander: die Farbtokens unter `.dark` weiter
|
||||
* unten schalteten korrekt um, jede einzelne `dark:`-Utility im Quellcode blieb
|
||||
* dagegen wirkungslos, sobald System und Portal-Einstellung nicht zufaellig
|
||||
* uebereinstimmten. Betroffen waren ueber 100 Stellen — Status-, Warn- und
|
||||
* Fehlerfarben, Hinweisboxen und Badges in der Administration. Der Fehler fiel
|
||||
* lange nicht auf, weil Hintergrund und Textfarbe eben NICHT ueber `dark:` laufen,
|
||||
* die Oberflaeche also grundsaetzlich dunkel wurde und nur die Feinheiten fehlten.
|
||||
*
|
||||
* Aufgedeckt beim Logo-Einbau (Quick 260907-fgv, WINDOWS.md #13), dessen
|
||||
* Plattenkontur `dark:stroke-white/25` aus genau diesem Grund nicht griff.
|
||||
*/
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
Reference in New Issue
Block a user