. 27 der 50 .prose-Stellen im Panel haben KEIN dark:prose-invert, sind also alle betroffen. Loesung: die prose-Variablen an die Theme-Variablen haengen. Im hellen Modus ist das praktisch farbgleich zum Vorher-Zustand (rgb(51,51,51) statt rgb(55,65,81)), im dunklen wird der Text zu 13:1. Die Regel ueberschreibt auch dark:prose-invert -- gewollt, das Ergebnis ist dort identisch hell, nur eben aus der Theme-Variable statt aus einem festen Grauwert. */ body.ailh-panel .prose { --tw-prose-body: hsl(var(--foreground)); --tw-prose-headings: hsl(var(--heading-foreground)); --tw-prose-lead: hsl(var(--foreground) / 0.85); --tw-prose-links: hsl(var(--heading-foreground)); --tw-prose-bold: hsl(var(--heading-foreground)); --tw-prose-counters: hsl(var(--foreground) / 0.8); --tw-prose-bullets: hsl(var(--foreground) / 0.5); --tw-prose-hr: hsl(var(--foreground) / 0.15); --tw-prose-quotes: hsl(var(--heading-foreground)); --tw-prose-quote-borders: hsl(var(--foreground) / 0.2); --tw-prose-captions: hsl(var(--foreground) / 0.8); --tw-prose-code: hsl(var(--heading-foreground)); --tw-prose-th-borders: hsl(var(--foreground) / 0.2); --tw-prose-td-borders: hsl(var(--foreground) / 0.12); } /* ========================================================================= 2) Halbtransparente TEXTFARBEN (text-foreground/NN, text-heading-foreground/NN) ------------------------------------------------------------------------- Das ist der mit Abstand haeufigste Weg, wie im Dashboard Text abgeschwaecht wird: 321x text-foreground/60, 275x /50, 240x /70, 191x /40 (plus /65, /55, /75). Gerechnet gegen den echten Grund war z.B. text-foreground/50 im Dunkeln 4,44:1 und im HELLEN nur 2,75:1 -- hell ist durchweg schlechter als dunkel. Angehoben wird jede Stufe, der Abstand zwischen den Stufen bleibt. /30 und /20 bleiben absichtlich unberuehrt: das sind Trennlinien, Wasserzeichen und Symbolflaechen, also Dekoration. */ /* --- Dunkelmodus: Text rgb(242) auf Grund rgb(41) --- */ body.theme-dark .text-foreground\/40 { color: hsl(var(--foreground) / 0.62); } /* 5,97:1 */ body.theme-dark .text-foreground\/50 { color: hsl(var(--foreground) / 0.70); } /* 7,17:1 */ body.theme-dark .text-foreground\/55 { color: hsl(var(--foreground) / 0.74); } /* 7,81:1 */ body.theme-dark .text-foreground\/60 { color: hsl(var(--foreground) / 0.78); } /* 8,51:1 */ body.theme-dark .text-foreground\/65 { color: hsl(var(--foreground) / 0.82); } /* 9,22:1 */ body.theme-dark .text-foreground\/70 { color: hsl(var(--foreground) / 0.86); } /* 10,0:1 */ body.theme-dark .text-foreground\/75 { color: hsl(var(--foreground) / 0.90); } /* 11,1:1 */ body.theme-dark .text-heading-foreground\/40 { color: hsl(var(--heading-foreground) / 0.58); } /* 5,9:1 */ body.theme-dark .text-heading-foreground\/50 { color: hsl(var(--heading-foreground) / 0.68); } /* 7,5:1 */ body.theme-dark .text-heading-foreground\/60 { color: hsl(var(--heading-foreground) / 0.75); } /* 8,8:1 */ body.theme-dark .text-heading-foreground\/70 { color: hsl(var(--heading-foreground) / 0.82); } /* 10,2:1 */ body.theme-dark .text-heading-foreground\/75 { color: hsl(var(--heading-foreground) / 0.86); } /* --- Hellmodus: Text rgb(51) auf Grund rgb(242) --- */ body.theme-light .text-foreground\/40 { color: hsl(var(--foreground) / 0.72); } /* 4,94:1 */ body.theme-light .text-foreground\/50 { color: hsl(var(--foreground) / 0.78); } /* 5,88:1 */ body.theme-light .text-foreground\/55 { color: hsl(var(--foreground) / 0.80); } /* 6,23:1 */ body.theme-light .text-foreground\/60 { color: hsl(var(--foreground) / 0.84); } /* 7,04:1 */ body.theme-light .text-foreground\/65 { color: hsl(var(--foreground) / 0.87); } /* 7,8:1 */ body.theme-light .text-foreground\/70 { color: hsl(var(--foreground) / 0.90); } /* 8,42:1 */ body.theme-light .text-foreground\/75 { color: hsl(var(--foreground) / 0.93); } /* 9,4:1 */ body.theme-light .text-heading-foreground\/40 { color: hsl(var(--heading-foreground) / 0.68); } /* 5,4:1 */ body.theme-light .text-heading-foreground\/50 { color: hsl(var(--heading-foreground) / 0.75); } /* 6,8:1 */ body.theme-light .text-heading-foreground\/60 { color: hsl(var(--heading-foreground) / 0.80); } /* 8,0:1 */ body.theme-light .text-heading-foreground\/70 { color: hsl(var(--heading-foreground) / 0.86); } /* 9,5:1 */ body.theme-light .text-heading-foreground\/75 { color: hsl(var(--heading-foreground) / 0.90); } /* ========================================================================= 3) Deckkraft-Utilities (opacity-40/50/60/70) auf TEXT ------------------------------------------------------------------------- Zweitwichtigste Ursache: 133x opacity-60, 102x opacity-50, 34x opacity-70, 16x opacity-40 im Dashboard. Beispiel und Ausloeser der Meldung: die Beschreibung unter "Create New Post" in app/Extensions/SocialMedia/resources/views/post/create.blade.php:167

-- sichtbar rgb(161,161,161), 5,67:1, formal ueber der Norm, bei text-xs aber trotzdem muehsam. WICHTIG, warum die Auswahl so eng ist: - opacity-0 wird NIE angefasst (174 Vorkommen; Alpine-/x-transition-Zustaende und bewusst ausgeblendete Elemente -- eine Anhebung wuerde Verstecktes sichtbar machen). - sind ausgeschlossen, damit Symbole ihre dekorative Abschwaechung behalten. - Elemente mit Hintergrund-, Rahmen- oder Positionierungsklassen sind ausgeschlossen: das sind Ueberlagerungen, Schleier und Trennflaechen, also ebenfalls Dekoration. - disabled:opacity-50 / group-hover:opacity-* sind eigene Klassennamen ("disabled:opacity-50") und werden von .opacity-50 nicht getroffen -- deaktivierte Knoepfe bleiben deaktiviert. */ body.theme-dark :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-40:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.62; } body.theme-dark :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-50:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.70; } body.theme-dark :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-60:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.78; } body.theme-dark :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-70:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.86; } body.theme-light :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-40:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.72; } body.theme-light :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-50:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.78; } body.theme-light :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-60:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.84; } body.theme-light :is(p, span, small, label, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, figcaption, strong, em, blockquote, legend, summary, div).opacity-70:not([class*="bg-"]):not([class*="absolute"]):not([class*="inset-"]) { opacity: 0.90; } /* ========================================================================= 4) Formularbeschriftungen (.text-label) ------------------------------------------------------------------------- resources/views/default/components/forms/input.blade.php gibt jedem Label "text-2xs font-medium text-label". --label ist im Dunkeln 220 10% 55% -> 3,92:1 und im Hellen 221 13% 46% -> 4,45:1, beides unter AA und beides bei winziger Schrift. BEWUSST wird hier die KLASSE ueberschrieben, nicht die Variable --label: --label dient im Dunkelmodus auch als Hintergrund des Umschalters (dark:checked:bg-label in input.blade.php). Ein Eingriff an der Variable haette also die Schalter mit umgefaerbt. */ body.theme-dark .text-label { color: hsl(220 12% 78%); } /* 8,2:1 */ body.theme-light .text-label { color: hsl(221 18% 32%); } /* 7,7:1 */ /* ========================================================================= 5) Feldinhalte und Platzhalter ------------------------------------------------------------------------- Eingabefelder tragen "bg-input-background text-input-foreground" (input.blade.php). Im Dunkeln ist --input-background 0 0% 30% (rgb 77) und --input-foreground 216 6% 85% -> 5,98:1. Fuer den Inhalt eines Textfeldes, in dem man schreibt, ist das zu wenig. Auch hier wieder die Klasse statt der Variable, weil --input-foreground an anderer Stelle (Tabler-Formulare) auch fuer Rahmen/Zustaende herangezogen werden koennte. */ body.theme-dark .text-input-foreground { color: hsl(0 0% 96%); } /* 7,8:1 auf rgb(77) */ /* Platzhalter: Tabler setzt .form-control::placeholder auf #a5a9b1 -- fest, themenblind. Die Felder dieses Themes heissen .lqd-input und bekommen sonst nur die Browservorgabe, die im Dunkelmodus zu dunkel und im Hellmodus zu blass ist. Bewusst deutlich schwaecher als der eingegebene Text, damit "leer" und "ausgefuellt" unterscheidbar bleiben. */ body.theme-dark .lqd-input::placeholder, body.theme-dark .form-control::placeholder { color: hsl(0 0% 76%); opacity: 1; } /* 4,7:1 */ body.theme-light .lqd-input::placeholder, body.theme-light .form-control::placeholder { color: hsl(0 0% 40%); opacity: 1; } /* 4,7:1 */