# Pico CSS — Gotchas & Notes ## [role=button] clobbers --pico-color Pico's stylesheet includes this rule: ```css [role=button], [type=button], button, ... { --pico-color: var(--pico-primary-inverse); ... } ``` In light mode, `--pico-primary-inverse` is `#fff`. This means **any element with `role="button"` will have white text by default**, regardless of its background. Children inherit this, making text invisible on white/light card backgrounds. **Fix:** On the element itself, reset the variable and set an explicit color: ```css .your-element { --pico-color: initial; color: var(--pico-contrast); /* #181c25 light / #dfe3eb dark — always legible */ } ``` **Alternative:** Remove `role="button"` and use `tabindex="0"` + keyboard handlers only, avoiding the Pico button rule entirely. Only do this if button semantics aren't needed for accessibility. ## Palette overrides must be scoped to light mode Pico defines its palette twice: once for light (`:root:not([data-theme=dark])`) and once for dark (`@media (prefers-color-scheme: dark)` + `[data-theme=dark]`). If you override Pico vars at bare `:root`, you'll clobber the dark mode values. **Wrong:** ```css :root { --pico-color: #2C2C2C; /* kills dark mode */ } ``` **Correct:** ```css @media (prefers-color-scheme: light) { :root:not([data-theme]) { --pico-color: #2C2C2C; } } [data-theme=light] { --pico-color: #2C2C2C; } ``` ## Theme toggling pattern Set `data-theme="light"` or `data-theme="dark"` on ``. Pico reads this attribute for its palette selectors. Persist to `localStorage`. Read OS preference (`prefers-color-scheme`) on first visit when no stored value exists. ## --pico-card-background-color in light mode In light mode, Pico sets: ``` --pico-card-background-color: var(--pico-background-color) → #fff ``` If you want custom card backgrounds, override `--pico-card-background-color` directly (scoped to light mode only — see above). ## CSS variables that Pico does NOT define - `--color-label` (app-defined) — must be set for both light and dark explicitly - Any `--shadow-*` vars — define at `:root` (theme-neutral)