skills.rest
wikimedia
wikimediaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

protowiki-theme

Resolve ProtoWiki global theming into a data-theme attribute at boot.

7|6|Updated Apr 28, 2026
Search Tags:#theming#light#data-theme#dark#protowiki#codex-tokens#per-subtree
One-click install
npx skills add https://github.com/wikimedia/ProtoWiki --skill protowiki-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: protowiki-theme
Source: https://github.com/wikimedia/ProtoWiki/tree/main/.agents/skills/protowiki-theme
Command: npx skills add https://github.com/wikimedia/ProtoWiki --skill protowiki-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

ProtoWiki needs a robust, predictable theming system that automatically adapts to global OS preferences, URL overrides, and per-subtree overrides without conflicting CSS. This Skill provides boot-time resolution of the theme into a data-theme attribute and enables scoped token application for consistent visuals across components.

Core Features & Use Cases

  • Boot-time global theme resolution using ?theme=light or ?theme=dark and OS prefers-color-scheme.
  • Data-theme attribute propagation to ensure Codex tokens align with the active theme.
  • Per-subtree overrides via a theme prop for side-by-side dark/light previews and targeted styling.
  • useTheme() hook for read-only access to the global theme from within components.

Quick Start

Append ?theme=dark (or ?theme=light) to the ProtoWiki URL to boot with the global theme, then apply per-component theme props to override within subtrees.

Frequently Asked Questions about protowiki-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply light and dark theming without relying on CSS media queries?▼

Light and dark theming is applied via boot-time Codex token rewriting, mapping OS preference and URL overrides to a data-theme attribute, eliminating the need for media-query-based toggling.

How does per-subtree theming work for side-by-side light and dark previews?▼

Per-subtree theming works by passing a theme prop to specific components, allowing scoped overrides that enable side-by-side dark and light previews while the global theme remains unaffected.

Can I access the active ProtoWiki theme from within my components?▼

Yes, you can access the active ProtoWiki theme using the read-only useTheme() hook, which keeps your components in sync with the globally resolved light or dark theme.

How do I force the global theme to boot as light or dark using a URL parameter?▼

You can force the global theme to boot by appending ?theme=dark or ?theme=light to the URL, which overrides the default OS prefers-color-scheme setting.

Why use Codex tokens for data-theme attribute resolution instead of standard CSS variables?▼

Using Codex tokens for data-theme attribute resolution ensures scoped token application and consistent visual alignment across components, preventing conflicting CSS during global theme adaptation.

Related Skills

Explore More Design & Creative Skills→
wikimediawikimedia
7

protowiki-update-codex

Upgrade ProtoWiki Codex packages in lockstep and propagate documented changes.

Official
Advanced
blencorpblencorp
101

mui

Provides MUI v7 styling and theming patterns via sx and components.

Official
Intermediate
vtexvtex
39

faststore-theming

Implement FastStore theming with design tokens and data attributes.

Official
Advanced
mgiffordmgifford
39

user-personalization

Implement user personalization controls that respect CSS media queries and persist choices via localStorage.

Community
Intermediate