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
parent 0f648ab9b8
commit da99b63916
3 changed files with 175 additions and 9 deletions
--- a/PICO_CSS.md
+++ b/PICO_CSS.md
@@ -0,0 +1,62 @@
+# 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)