makepad-2.0-theme
makepad theme, theme variable, theme color, theme font, theme spacing, dark mode, light mode, theme switching, mod.themes, theme_mod, theme.color_, theme.font_, theme.space_, theme.mspace_, 主题, 颜色, 字体, 暗色模式, 亮色模式, 主题切换, 样式
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Defines a theme system for Makepad 2.0 that exposes a comprehensive set of design tokens through theme.* variables. Provides three built-in themes (mod.themes.dark, mod.themes.light, mod.themes.skeleton) and enforces using theme variables over hardcoded values. Includes a pattern to load themes before widgets, switch active themes at runtime, and propagate theme values to widgets. Documents a wide range of theme parameters (colors, fonts, spacing, bevels, and more) and instructions for using those variables in Splash scripts. Three built-in themes and a default dark theme are specified, with a procedure to initialize theme_mod(vm) and widgets_mod(vm) in App::run.
How it works
- Calls makepad_draw::script_mod(vm) to load drawing primitives and creates mod.themes and loads theme_desktop_dark, theme_desktop_light, and theme_desktop_skeleton.
- Sets mod.theme = mod.themes.dark as the default.
- Exposes theme.* tokens to all widget scripts via widgets_mod(vm) so widgets can reference the active theme.
- Provides runtime switching: in Rust event handlers, use script_eval!(..., { mod.theme = mod.themes.dark or mod.themes.light }); and potentially trigger a re-render.
- Encourages loading the theme before widgets and selecting the active theme before widgets_mod is called.
- Describes how to apply theme variables for colors, font sizes, font styles, and spacing in Splash code and how to compose UI using theme.* tokens.
When to use it
Use when you want a centralized, switchable theme system for a Makepad 2.0 app, ensuring colors, typography, and spacing respond to theme changes and remain consistent across widgets. Triggers include phrases like makepad theme, theme variable, theme color, theme font, theme spacing, dark mode, light mode, theme switching, mod.themes, theme_mod, theme.color_, theme.font_, theme.space_, theme.mspace_, 主题, 颜色, 字体, 暗色模式, 亮色模式, 主题切换, 样式.
What it can touch
- Tokens via theme.* variables in Splash scripts (colors, fonts, spacing, widget states).
- Theme modules loaded through makepad_widgets::theme_mod(vm) and widgets_mod(vm).
- Runtime switch via script_eval!(vm, { mod.theme = mod.themes.dark|light }).
Caveats
- Default theme is dark when steps 1-2 are skipped.
- Requires loading theme_definitions before widgets for proper propagation.
- Describes specific default values for many parameters (e.g., color_contrast, space_factor, font_size_base), which should be used as reference for consistent styling.
# Makepad 2.0 Theme System ## Overview The Makepad 2.0 theme system provides a comprehensive set of design tokens accessed through `theme.*` variables in Splash scripts. It delivers consistent styling for colors, typography, spacing, and widget states across your entire application. Three built-in themes are available: - `mod.themes.dark` -- dark desktop theme (default) - `mod.themes.light` -- light desktop theme - `mod.themes.skeleton` -- minimal skeleton theme with hardcoded values **Golden rule**: Always use `theme.*` variables instead of hardcoded values for any color, font size, or spacing in production UIs. This ensures your app automatically supports theme switching and maintains visual consistency. ## Theme Setup in App::run The theme must be loaded **before** widgets are loaded. The standard pattern is: ```rust impl App { fn run(vm: &mut ScriptVm) -> Self { // Step 1: Load theme definitions (dark, light, skeleton) crate::makepad_widgets::theme_mod(vm); // Step 2: Select active theme (MUST come before widgets_mod) script_eval!(vm, { mod.theme = mod.themes.light // or mod.themes.dark }); // Step 3: Load widget definitions (they reference mod.theme) crate::makepad_widgets::wi
- Overview
- Theme Setup in App::run
- How It Works Internally
- Theme Global Parameters
- Theme Color Variables -- Primary
- Theme Color Variables -- Text and Labels
- Theme Color Variables -- Widget States
- Theme Color Variables -- Semantic/Status
- Theme Color Variables -- Bevel System
- Theme Color Variables -- Additional Widget Colors
- Theme Font Variables
- Font Sizes
- Font Styles (TextStyle objects)
- Line Spacing Constants
What does the makepad-2.0-theme skill do?
makepad theme, theme variable, theme color, theme font, theme spacing, dark mode, light mode, theme switching, mod.themes, theme_mod, theme.color_, theme.font_, theme.space_, theme.mspace_, 主题, 颜色, 字体, 暗色模式, 亮色模式, 主题切换, 样式
How do I install it?
Run `npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-theme --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ZhangHanDong/makepad-skills, a repository with 745 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.