artifact-theminglisted
Install: claude install-skill Lukehle/chartroom
# Artifact theming
The single most common visual bug in published pages, and it comes from a wrong mental model:
**there are three theme states, not two.**
| State | What the root element carries | Detected by |
|---|---|---|
| Explicit dark | `data-theme="dark"` | attribute |
| Explicit light | `data-theme="light"` | attribute |
| **System default** | **nothing** | `prefers-color-scheme` only |
The default setting stamps no attribute. A page that only handles `[data-theme="dark"]` is unstyled
for everyone on system default — which is most people.
---
## The pattern that covers all three
```css
/* 1. Complete light palette on bare :root. EVERY token defined here. */
:root {
--surface: #ffffff;
--ink: #14161a;
--border: #e3e6ea;
--grid: #eceff3;
/* … the full set … */
}
/* 2. System dark - guarded so an explicit light choice still wins */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface: #101215;
--ink: #e8eaed;
--border: #262b31;
--grid: #1c2126;
}
}
/* 3. Explicit dark - so the toggle wins in both directions */
:root[data-theme="dark"] {
--surface: #101215;
--ink: #e8eaed;
--border: #262b31;
--grid: #1c2126;
}
```
Three rules, and each prevents a specific bug:
1. **Every token gets its definition on bare `:root`.** A colour whose only definition lives inside a
media query or a `[data-theme]` block is undefined in the third state.
2. **Guard the media block with `:not([data-theme="light"])`.**