makepad-2.0-theme — Claude Code skill for Makepad 2.0 themes
A skill covering the Makepad 2.0 theme system: theme.* variables, dark and light modes, colors, fonts and spacing in Splash.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-codeWhat makepad-2.0-theme does
The skill documents how Makepad 2.0 themes work and which theme.* variables Splash scripts can use. It lists the three built-in themes — mod.themes.dark (the default), mod.themes.light and the hardcoded mod.themes.skeleton — and maps variables for backgrounds, text, widget states, status colors and the bevel layers.
A separate section walks through theme loading in App::run. Call theme_mod first, pick the active theme with script_eval!, then load widgets_mod. Skip the first two calls and you get the dark theme, since theme_mod sets it. Widgets reach the theme through mod.prelude.widgets_internal, so the choice has to happen before they load; otherwise every color and spacing value comes from the dark set.
The skill's rule for production UI: no literal colors, font sizes or spacing. Pull them from theme.* instead, and theme switching keeps working without touching each widget.
What it helps with
- pick the active theme before widgets load
- swap hardcoded colors for
theme.*variables - ship one interface in both light and dark
- choose text colors for hover, focus and disabled states
- tune global theme parameters such as corner radius and the spacing multiplier
Example prompts for the agent
- Show how to select
mod.themes.lightinstead of the dark theme inApp::run - Which
theme.*variables cover container background and alternating rows? - Rewrite the button colors to use theme variables so mode switching works
How to install makepad-2.0-theme
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-theme/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-theme/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-theme/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-theme/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-theme2Manually: put the files in place
.github/skills/makepad-2.0-theme/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-themeManually: put the files in place
.devin/skills/makepad-2.0-theme/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about makepad-2.0-theme
How do I install makepad-2.0-theme in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme -a claude-code. The skill lands in ~/.claude/skills/makepad-2.0-theme/SKILL.md.
What does makepad-2.0-theme do?
It explains the Makepad 2.0 theme system: the built-in themes, theme.* variables for colors, fonts and spacing, and the order in which a theme must be loaded in App::run.
Why does my theme not reach the widgets?
The theme is selected before widgets_mod runs. Break that order and widgets fall back to the dark theme that theme_mod sets by default.
