deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

force heading colors with !important to beat Pico's cascade

Browse Source 
The variable-based overrides (--pico-h1-color, --pico-color) weren't
reliably winning against Pico's multi-layer cascade of theme selectors,
prefers-color-scheme media queries, and variable indirection. Headings
were rendering near-white (#f0f1f3) on dark-OS systems despite
data-theme="light". Using !important on color is the pragmatic fix.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-14 02:11:53 +01:00
parent f562df8437
commit 9c2465e4c5
1 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
padelnomics/src/padelnomics/static/css/custom.css
View File

@@ -45,18 +45,15 @@
}
/* Headings — Deep Navy, Inter
Specificity must match Pico's [data-theme=light] h1 (0,1,1)
to win over dark-mode heading colors on dark-OS systems. */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
--pico-color: #0F172A;
color: #0F172A;
Force heading colors with !important to beat Pico's multi-layer
variable cascade (theme selectors + prefers-color-scheme media). */
h1, h2, h3, h4, h5, h6 {
color: #0F172A !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
h4, h5, h6 {
color: #1E293B !important;
}
/* Data & metrics use monospace */
.metric, .mono, [data-mono] {