I settled on a three-way theme set — Light, Dark, System — because the given context only establishes a themable token layer switched via `data-theme`, with no named theme catalogue to draw on; Light/Dark maps directly onto the one signal the platform actually exposes (`prefers-color-scheme`), and System is the honest default state rather than a fourth invented theme. For persistence I used `localStorage` under a single key, storing only an explicit `"light"`/`"dark"` choice and treating an a...
Scanned 9/11/2026
Install to Claude Code
Skills Directorynpx -y skills add oaknational/oak-open-curriculum-ecosystem --skill transcripts --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Transcripts?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/oaknational-transcripts-oak-open-curriculum-ecosystem)More formats (shields.io, HTML) on the badges page.
# Transcript
I settled on a three-way theme set — Light, Dark, System — because the given
context only establishes a themable token layer switched via `data-theme`,
with no named theme catalogue to draw on; Light/Dark maps directly onto the
one signal the platform actually exposes (`prefers-color-scheme`), and
System is the honest default state rather than a fourth invented theme.
For persistence I used `localStorage` under a single key, storing only an
explicit `"light"`/`"dark"` choice and treating an absent key as "follow the
OS": this makes "no preference expressed" a first-class, storage-free state
rather than a stored `"system"` sentinel that could drift out of sync with
the OS. The theme is applied by an inline script in `<head>`, before the
stylesheet paints, to avoid a flash of the wrong theme on reload.
To keep following the OS after a page has loaded (e.g. the OS flips to dark
mode automatically at sunset), a `matchMedia("(prefers-color-scheme: dark)")`
change listener re-applies the system theme, but only while no explicit
choice is stored — once the user picks Light or Dark, that listener's output
is ignored for them until they pick System again.
The hardest part, absent any grounding in the real design system, was
deciding what to invent versus what to leave generic: I used plausible
`--oak-color-*` custom-property names to gesture at a "token layer" without
pretending to know the real token set, and kept the UI to buttons with
`aria-pressed` rather than guessing at real component markup.
Is this your skill, or is something wrong with this listing? . Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
