# Protowiki Theme > How light / dark theming works in ProtoWiki — boot-time resolution of ?theme= URL param + prefers-color-scheme into a data-theme attribute on , the runtime-injected Codex token sets scoped to [data-theme], the per-component theme prop for subtree overrides (including full-route demos), and the read-only useTheme() hook. Use when adding theme-specific styles, embedding a dark snippet on a light page, debugging colour cascades, or wiring a "preview in dark" toggle. - Skill: `wikimedia/protowiki-theme` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add wikimedia/protowiki-theme` - Raw SKILL.md: https://api.skillmd.com/api/skills/wikimedia/protowiki-theme/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: wikimedia (https://skillmd.com/u/wikimedia) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wikimedia/protowiki-theme --- # ProtoWiki — theme ProtoWiki supports light and dark themes, both based on the official Codex design tokens. Themes control colours, shadows, and a few derived visual properties. Layout is the [skin](../protowiki-skins/SKILL.md)'s job. ## How the global theme is resolved At boot, `src/theme.ts` decides the global theme in this order: 1. `?theme=light` or `?theme=dark` URL param, if either is present. 2. The stored **Color** preference (`config.theme`: `light` / `dark` / `system`), set in the gallery's Appearance settings. 3. Otherwise (`system`), `window.matchMedia('(prefers-color-scheme: dark)').matches` determines the theme. The result is set as `data-theme="…"` on ``. When neither the URL param nor the stored preference is pinning the value, the boot script subscribes to a media-query listener so the global theme updates live when the OS preference changes. **Theme is platform-agnostic.** It works identically in web and app prototypes — unlike the skin (`data-skin`, web only) and the app OS (`data-app-platform`, app only). `AppChromeWrapper` provides the effective theme to its subtree the same way `ChromeWrapper` does; see [`protowiki-app-prototyping`](../protowiki-app-prototyping/SKILL.md). ## How the Codex tokens get re-scoped Codex ships two token files at `:root` selectors: `@wikimedia/codex-design-tokens/theme-wikimedia-ui.css` (light) and `theme-wikimedia-ui-mode-dark.css` (dark). Both target `:root`. `src/theme.ts` reads both files via `?raw` imports at boot, **rewrites `:root` to `[data-theme="light"]` / `[data-theme="dark"]`**, and injects them as `