/* =========================================================================== Dark-mode contrast guard --------------------------------------------------------------------------- Dark mode puts .dark on and lets CSS repaint things. That works for anything styled with CLASSES: dark-mode-fixes.css repaints .bg-white / .bg-gray-50 / .bg-gray-100 dark and flips .text-gray-* light. It cannot work for a background written as an INLINE style, because inline styles beat stylesheets. A card built the way React builds one: style: { backgroundColor: "#FEF3C7" } -> stays pale yellow in dark mode span "Nominations:" -> inherits .dark light text ends up pale-grey-on-pale-yellow. Measured on the GOAT dashboard card that shape gives a contrast ratio of 1.01:1 -- literally invisible. A scan of 286 component files found 310 such inline light backgrounds across 52 distinct colours, so this is one bug repeated, not a page-specific slip. This file fixes the SHAPE: any element whose inline style paints a light background gets readable dark text. Children that set their own colour (a heading picked to sit on that pale card) keep it -- verified: the GOAT heading stays at 6.37:1 while its body text goes 1.01 -> 15.93. DELIBERATELY LIMITED TO INLINE BACKGROUNDS. An earlier draft also targeted pale Tailwind classes (.bg-yellow-50 etc). That made things WORSE: those classes are already repainted dark elsewhere, so forcing dark text on them dropped .bg-yellow-50 from 4.65:1 to 2.14:1. CSS cannot ask "is the computed background actually light?", so guessing by class name is unsafe. Class-based cases belong in dark-mode-fixes.css, where the background itself is repainted. Why the selectors match rgb() and not hex: browsers serialise inline colours through the CSSOM, so the style attribute literally reads "background-color: rgb(254, 243, 199)". Matching is scoped to the background property, so white text on a dark background (which serialises under "color:") is never touched -- verified to stay at 17.74:1. Colour list generated from the codebase (luminance > 0.72). Regenerate when new pale palettes appear; anything unmatched simply keeps today's behaviour. =========================================================================== */ /* 1. The pale container -- fixes every child that inherits its colour. */ html.dark :is( [style*="background-color: rgb(187, 247, 208)"], [style*="background: rgb(187, 247, 208)"], [style*="background-color: rgb(209, 250, 229)"], [style*="background: rgb(209, 250, 229)"], [style*="background-color: rgb(219, 234, 254)"], [style*="background: rgb(219, 234, 254)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(221, 221, 221)"], [style*="background: rgb(221, 221, 221)"], [style*="background-color: rgb(224, 231, 255)"], [style*="background: rgb(224, 231, 255)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(225, 243, 251)"], [style*="background: rgb(225, 243, 251)"], [style*="background-color: rgb(227, 230, 235)"], [style*="background: rgb(227, 230, 235)"], [style*="background-color: rgb(229, 221, 213)"], [style*="background: rgb(229, 221, 213)"], [style*="background-color: rgb(229, 231, 235)"], [style*="background: rgb(229, 231, 235)"], [style*="background-color: rgb(231, 243, 255)"], [style*="background: rgb(231, 243, 255)"], [style*="background-color: rgb(232, 245, 233)"], [style*="background: rgb(232, 245, 233)"], [style*="background-color: rgb(235, 245, 255)"], [style*="background: rgb(235, 245, 255)"], [style*="background-color: rgb(236, 229, 221)"], [style*="background: rgb(236, 229, 221)"], [style*="background-color: rgb(236, 252, 203)"], [style*="background: rgb(236, 252, 203)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(238, 242, 247)"], [style*="background: rgb(238, 242, 247)"], [style*="background-color: rgb(238, 242, 255)"], [style*="background: rgb(238, 242, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(240, 242, 245)"], [style*="background: rgb(240, 242, 245)"], [style*="background-color: rgb(240, 248, 255)"], [style*="background: rgb(240, 248, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 250)"], [style*="background: rgb(240, 253, 250)"], [style*="background-color: rgb(241, 245, 249)"], [style*="background: rgb(241, 245, 249)"], [style*="background-color: rgb(243, 244, 246)"], [style*="background: rgb(243, 244, 246)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 250, 252)"], [style*="background: rgb(248, 250, 252)"], [style*="background-color: rgb(249, 250, 251)"], [style*="background: rgb(249, 250, 251)"], [style*="background-color: rgb(250, 245, 255)"], [style*="background: rgb(250, 245, 255)"], [style*="background-color: rgb(250, 250, 249)"], [style*="background: rgb(250, 250, 249)"], [style*="background-color: rgb(250, 250, 250)"], [style*="background: rgb(250, 250, 250)"], [style*="background-color: rgb(251, 252, 253)"], [style*="background: rgb(251, 252, 253)"], [style*="background-color: rgb(252, 231, 243)"], [style*="background: rgb(252, 231, 243)"], [style*="background-color: rgb(253, 230, 138)"], [style*="background: rgb(253, 230, 138)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 243, 199)"], [style*="background: rgb(254, 243, 199)"], [style*="background-color: rgb(254, 252, 232)"], [style*="background: rgb(254, 252, 232)"], [style*="background-color: rgb(255, 235, 238)"], [style*="background: rgb(255, 235, 238)"], [style*="background-color: rgb(255, 237, 213)"], [style*="background: rgb(255, 237, 213)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 243, 205)"], [style*="background: rgb(255, 243, 205)"], [style*="background-color: rgb(255, 247, 237)"], [style*="background: rgb(255, 247, 237)"], [style*="background-color: rgb(255, 248, 240)"], [style*="background: rgb(255, 248, 240)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 254, 245)"], [style*="background: rgb(255, 254, 245)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(74, 222, 128)"], [style*="background: rgb(74, 222, 128)"] ) { color: #111827; } /* 2. Text carrying a .text-* class, which dark-mode-fixes.css forces light with !important (that beats inheritance, so rule 1 alone is not enough). Both forms are needed: the class may sit on a CHILD of the pale element, or on the pale element ITSELF (e.g. one span with both bg and text). */ html.dark :is( [style*="background-color: rgb(187, 247, 208)"], [style*="background: rgb(187, 247, 208)"], [style*="background-color: rgb(209, 250, 229)"], [style*="background: rgb(209, 250, 229)"], [style*="background-color: rgb(219, 234, 254)"], [style*="background: rgb(219, 234, 254)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(221, 221, 221)"], [style*="background: rgb(221, 221, 221)"], [style*="background-color: rgb(224, 231, 255)"], [style*="background: rgb(224, 231, 255)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(225, 243, 251)"], [style*="background: rgb(225, 243, 251)"], [style*="background-color: rgb(227, 230, 235)"], [style*="background: rgb(227, 230, 235)"], [style*="background-color: rgb(229, 221, 213)"], [style*="background: rgb(229, 221, 213)"], [style*="background-color: rgb(229, 231, 235)"], [style*="background: rgb(229, 231, 235)"], [style*="background-color: rgb(231, 243, 255)"], [style*="background: rgb(231, 243, 255)"], [style*="background-color: rgb(232, 245, 233)"], [style*="background: rgb(232, 245, 233)"], [style*="background-color: rgb(235, 245, 255)"], [style*="background: rgb(235, 245, 255)"], [style*="background-color: rgb(236, 229, 221)"], [style*="background: rgb(236, 229, 221)"], [style*="background-color: rgb(236, 252, 203)"], [style*="background: rgb(236, 252, 203)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(238, 242, 247)"], [style*="background: rgb(238, 242, 247)"], [style*="background-color: rgb(238, 242, 255)"], [style*="background: rgb(238, 242, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(240, 242, 245)"], [style*="background: rgb(240, 242, 245)"], [style*="background-color: rgb(240, 248, 255)"], [style*="background: rgb(240, 248, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 250)"], [style*="background: rgb(240, 253, 250)"], [style*="background-color: rgb(241, 245, 249)"], [style*="background: rgb(241, 245, 249)"], [style*="background-color: rgb(243, 244, 246)"], [style*="background: rgb(243, 244, 246)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 250, 252)"], [style*="background: rgb(248, 250, 252)"], [style*="background-color: rgb(249, 250, 251)"], [style*="background: rgb(249, 250, 251)"], [style*="background-color: rgb(250, 245, 255)"], [style*="background: rgb(250, 245, 255)"], [style*="background-color: rgb(250, 250, 249)"], [style*="background: rgb(250, 250, 249)"], [style*="background-color: rgb(250, 250, 250)"], [style*="background: rgb(250, 250, 250)"], [style*="background-color: rgb(251, 252, 253)"], [style*="background: rgb(251, 252, 253)"], [style*="background-color: rgb(252, 231, 243)"], [style*="background: rgb(252, 231, 243)"], [style*="background-color: rgb(253, 230, 138)"], [style*="background: rgb(253, 230, 138)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 243, 199)"], [style*="background: rgb(254, 243, 199)"], [style*="background-color: rgb(254, 252, 232)"], [style*="background: rgb(254, 252, 232)"], [style*="background-color: rgb(255, 235, 238)"], [style*="background: rgb(255, 235, 238)"], [style*="background-color: rgb(255, 237, 213)"], [style*="background: rgb(255, 237, 213)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 243, 205)"], [style*="background: rgb(255, 243, 205)"], [style*="background-color: rgb(255, 247, 237)"], [style*="background: rgb(255, 247, 237)"], [style*="background-color: rgb(255, 248, 240)"], [style*="background: rgb(255, 248, 240)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 254, 245)"], [style*="background: rgb(255, 254, 245)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(74, 222, 128)"], [style*="background: rgb(74, 222, 128)"] ) :is( .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900, .text-white ), html.dark :is( [style*="background-color: rgb(187, 247, 208)"], [style*="background: rgb(187, 247, 208)"], [style*="background-color: rgb(209, 250, 229)"], [style*="background: rgb(209, 250, 229)"], [style*="background-color: rgb(219, 234, 254)"], [style*="background: rgb(219, 234, 254)"], [style*="background-color: rgb(220, 252, 231)"], [style*="background: rgb(220, 252, 231)"], [style*="background-color: rgb(221, 221, 221)"], [style*="background: rgb(221, 221, 221)"], [style*="background-color: rgb(224, 231, 255)"], [style*="background: rgb(224, 231, 255)"], [style*="background-color: rgb(224, 242, 254)"], [style*="background: rgb(224, 242, 254)"], [style*="background-color: rgb(225, 243, 251)"], [style*="background: rgb(225, 243, 251)"], [style*="background-color: rgb(227, 230, 235)"], [style*="background: rgb(227, 230, 235)"], [style*="background-color: rgb(229, 221, 213)"], [style*="background: rgb(229, 221, 213)"], [style*="background-color: rgb(229, 231, 235)"], [style*="background: rgb(229, 231, 235)"], [style*="background-color: rgb(231, 243, 255)"], [style*="background: rgb(231, 243, 255)"], [style*="background-color: rgb(232, 245, 233)"], [style*="background: rgb(232, 245, 233)"], [style*="background-color: rgb(235, 245, 255)"], [style*="background: rgb(235, 245, 255)"], [style*="background-color: rgb(236, 229, 221)"], [style*="background: rgb(236, 229, 221)"], [style*="background-color: rgb(236, 252, 203)"], [style*="background: rgb(236, 252, 203)"], [style*="background-color: rgb(236, 253, 245)"], [style*="background: rgb(236, 253, 245)"], [style*="background-color: rgb(237, 233, 254)"], [style*="background: rgb(237, 233, 254)"], [style*="background-color: rgb(238, 242, 247)"], [style*="background: rgb(238, 242, 247)"], [style*="background-color: rgb(238, 242, 255)"], [style*="background: rgb(238, 242, 255)"], [style*="background-color: rgb(239, 246, 255)"], [style*="background: rgb(239, 246, 255)"], [style*="background-color: rgb(240, 242, 245)"], [style*="background: rgb(240, 242, 245)"], [style*="background-color: rgb(240, 248, 255)"], [style*="background: rgb(240, 248, 255)"], [style*="background-color: rgb(240, 249, 255)"], [style*="background: rgb(240, 249, 255)"], [style*="background-color: rgb(240, 253, 244)"], [style*="background: rgb(240, 253, 244)"], [style*="background-color: rgb(240, 253, 250)"], [style*="background: rgb(240, 253, 250)"], [style*="background-color: rgb(241, 245, 249)"], [style*="background: rgb(241, 245, 249)"], [style*="background-color: rgb(243, 244, 246)"], [style*="background: rgb(243, 244, 246)"], [style*="background-color: rgb(245, 243, 255)"], [style*="background: rgb(245, 243, 255)"], [style*="background-color: rgb(248, 249, 250)"], [style*="background: rgb(248, 249, 250)"], [style*="background-color: rgb(248, 250, 252)"], [style*="background: rgb(248, 250, 252)"], [style*="background-color: rgb(249, 250, 251)"], [style*="background: rgb(249, 250, 251)"], [style*="background-color: rgb(250, 245, 255)"], [style*="background: rgb(250, 245, 255)"], [style*="background-color: rgb(250, 250, 249)"], [style*="background: rgb(250, 250, 249)"], [style*="background-color: rgb(250, 250, 250)"], [style*="background: rgb(250, 250, 250)"], [style*="background-color: rgb(251, 252, 253)"], [style*="background: rgb(251, 252, 253)"], [style*="background-color: rgb(252, 231, 243)"], [style*="background: rgb(252, 231, 243)"], [style*="background-color: rgb(253, 230, 138)"], [style*="background: rgb(253, 230, 138)"], [style*="background-color: rgb(254, 226, 226)"], [style*="background: rgb(254, 226, 226)"], [style*="background-color: rgb(254, 242, 242)"], [style*="background: rgb(254, 242, 242)"], [style*="background-color: rgb(254, 243, 199)"], [style*="background: rgb(254, 243, 199)"], [style*="background-color: rgb(254, 252, 232)"], [style*="background: rgb(254, 252, 232)"], [style*="background-color: rgb(255, 235, 238)"], [style*="background: rgb(255, 235, 238)"], [style*="background-color: rgb(255, 237, 213)"], [style*="background: rgb(255, 237, 213)"], [style*="background-color: rgb(255, 240, 240)"], [style*="background: rgb(255, 240, 240)"], [style*="background-color: rgb(255, 243, 205)"], [style*="background: rgb(255, 243, 205)"], [style*="background-color: rgb(255, 247, 237)"], [style*="background: rgb(255, 247, 237)"], [style*="background-color: rgb(255, 248, 240)"], [style*="background: rgb(255, 248, 240)"], [style*="background-color: rgb(255, 251, 235)"], [style*="background: rgb(255, 251, 235)"], [style*="background-color: rgb(255, 254, 245)"], [style*="background: rgb(255, 254, 245)"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(74, 222, 128)"], [style*="background: rgb(74, 222, 128)"] ):is( .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900, .text-white ) { color: #1f2937 !important; }