Files

Falkan da99b63916 feat: Dan Mode (third theme), Pico CSS notes, cycle theme toggle

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.

2026-03-17 11:28:42 -04:00

2.1 KiB

Raw Blame History

Pico CSS — Gotchas & Notes

[role=button] clobbers --pico-color

Pico's stylesheet includes this rule:

[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:

.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:

:root {
  --pico-color: #2C2C2C; /* kills dark mode */
}

Correct:

@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)

2.1 KiB Raw Blame History