da99b63916
Dan Mode: pure white backgrounds, electric blue text (#0000ff), nuclear yellow accents (#ffff00), hot magenta borders (#ff00ff), red labels, glowing box-shadows. Maximum saturation. Hostile to human vision by design. Theme toggle now cycles light → dark → dan → light (icons: 🌙 😎 ☀️). PICO_CSS.md: documents [role=button] color clobber, palette scoping rules, and theme toggling pattern for future reference.
63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
# 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 `<html>`. 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)
|