fix(a11y): add dark-theme overrides for hardcoded light-theme colours

skjnldsv · claude · skjnldsv · commit 52f7de9e6fb5 · 2026-05-13T08:05:36.000+02:00
The recent BITV contrast fixes hardcoded colours that were chosen for the white (light) background. The sphinx-rtd-dark-mode plugin switches the content background to ~#141414 and code bg to #2d2d2d, making those values fail WCAG AA in dark mode: - .rst-content a: #2474a4 → 3.6:1 on #141414 (needs 4.5:1) Also silently overrides the plugin's --dark-link-color variable. - code color: #c0392b !important → 2.4:1 on #2d2d2d (needs 4.5:1) The !important fully defeats the plugin's dark-mode rule. - .wy-form-search-icon: #555 → ~1.7:1 on #0b152d sidebar (invisible) Add html[data-theme="dark"] overrides that restore proper contrast without touching the existing light-theme rules: - Links: defer to var(--dark-link-color, #249ee8) (~6.1:1) - Inline code: #ff7878 (~4.9:1 on #2d2d2d) - Search icon: #aaa Closes #14831 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
diff --git a/_shared_assets/static/custom.css b/_shared_assets/static/custom.css
@@ -153,6 +153,31 @@ html[data-theme="dark"] .rst-content img {
 	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
 }
 
+/* Dark-theme overrides — sphinx-rtd-dark-mode sets data-theme="dark" on
+   <html>. The selectors below restore proper contrast for values that
+   were hardcoded for the light (white) background. */
+
+/* Content links: #2474a4 gives only ~3.6:1 on the dark #141414 bg.
+   Defer to the plugin's own variable (= #249ee8, ~6:1 on dark bg). */
+html[data-theme="dark"] .rst-content a,
+html[data-theme="dark"] .rst-content a:visited {
+	color: var(--dark-link-color, #249ee8);
+}
+
+/* Inline code: #c0392b (dark red) gives ~2.4:1 on the #2d2d2d code bg,
+   and the !important above defeats the plugin's dark-mode rule entirely.
+   Use a lighter coral-red (~4.9:1 on #2d2d2d). */
+html[data-theme="dark"] .rst-content code,
+html[data-theme="dark"] .rst-content tt,
+html[data-theme="dark"] code {
+	color: #ff7878 !important;
+}
+
+/* Search icon: #555 is near-invisible on the dark #0b152d sidebar bg. */
+html[data-theme="dark"] .wy-form-search-icon {
+	color: #aaa;
+}
+
 /* ICONS LIST */
 div#list-of-available-icons > blockquote {
 	margin: 0;
