skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-theme

Apply Makepad 2.0 theme variables for colors, fonts, and spacing in Splash UI scripts.

747|87|Updated Jan 10, 2026
Search Tags:# styling#themING#makepad#Splash#rust ui#Dark mode#Design tokens
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-theme
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-theme
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building Makepad 2.0 interfaces with hardcoded colors, font sizes, and spacing breaks theme switching and visual consistency. This Skill provides the complete theme.* variable system so UIs automatically support dark/light mode and consistent design tokens.

Core Features & Use Cases

  • Theme Variable Reference: Full catalog of color, typography, and spacing variables (theme.color_*, theme.font_*, theme.space_*, theme.mspace_*) for dark, light, and skeleton themes.
  • Theme Setup & Switching: Correct App::run initialization order (theme_mod before widgets_mod) and runtime theme switching via script_eval! in event handlers.
  • State-Aware Styling: Widget state color variants (_hover, _focus, _down, _disabled) plus bevel, inset/outset, selection, and semantic status colors.
  • Use Case: Build a themed card list where backgrounds, text colors, padding, and corner radii all derive from theme variables, then add a toggle button that switches the entire app between dark and light mode at runtime.

Quick Start

Ask the AI to build a Makepad 2.0 themed card component using theme variables for colors, fonts, and spacing with dark/light mode support.

Frequently Asked Questions about makepad-2.0-theme

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

FAQPage Schema
How do I switch between dark and light mode in Makepad 2.0?▼

Set the theme with script_eval!(vm, { mod.theme = mod.themes.light }) between theme_mod() and widgets_mod() calls in App::run. For runtime switching, call script_eval! inside an event handler and assign mod.theme to the desired theme.

What theme color variables should I use for text in Makepad?▼

Use theme.color_label_inner for primary UI text, theme.color_label_inner_inactive for muted secondary text, theme.color_text for general content, and theme.color_text_placeholder for input placeholders. These adapt automatically across dark and light themes.

Why is my Makepad theme not applying to widgets?▼

The theme must be selected after theme_mod() but before widgets_mod(), because widget definitions capture mod.theme at load time. If you skip this ordering, widgets fall back to the default dark theme.

How do I override a theme font size in Makepad Splash?▼

Use the brace override syntax: draw_text.text_style: theme.font_bold{font_size: theme.font_size_2} keeps the bold font family while changing size. For nested partial overrides, use the merge syntax draw_text +: {text_style +: {font_size: theme.font_size_3}}.

Can I use hardcoded hex colors instead of theme variables in Makepad?▼

Splash supports hex colors like #ff0000 and vec4(r,g,b,a), but hardcoding breaks theme switching. Reserve hex values for prototypes and use semantic variables like theme.color_error or theme.color_highlight in production UIs.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

makepad-deployment

Builds, signs, and packages desktop, mobile, and web apps.

Community
Advanced
SageV1SageV1
1

makepad-event-action

Automate Makepad widget event handling and parent action signaling.

Community
Intermediate
SageV1SageV1
1

makepad-widgets

Provide Makepad UI widgets including View, Label, Button, Image, and TextInput.

Community
Basic
rahul-s-bhattrahul-s-bhatt

creating-streamlit-themes

Create Streamlit app themes via config.toml configuration.

Community
Basic