material-theme-builder

Generate Material Design 3 color themes and tokens from a source hex color.

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-theme-builder-pohlai88
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: material-theme-builder
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/material-theme-builder
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-theme-builder-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @material/material-color-utilities.

What problem does it solve? Manually building a complete Material Design 3 color system from a brand color is tedious and error-prone, requiring correct tonal palettes, light/dark schemes, surface containers, and fixed accent roles. This Skill automates the entire process using the same color engine behind Google's Material Theme Builder. ## Core Features & Use Cases - M3 Theme Generation: Produce full light and dark color schemes from any hex source color using @material/material-color-utilities and the HCT color space. - Nine Scheme Variants: Choose from tonal-spot, content, expressive, fidelity, fruit-salad, monochrome, neutral, rainbow, and vibrant dynamic color strategies. - Token Export: Output complete token sets including surface containers and fixed colors as CSS custom properties or JSON. - Use Case: Given a brand color like #FF9800, generate a production-ready CSS file with all M3 color roles for both light and dark modes in one command. ## Quick Start Ask the AI to generate an M3 theme from your brand hex color, for example: generate a Material 3 theme from #FF9800 and export it as CSS custom properties.

Frequently Asked Questions about material-theme-builder

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

FAQPage Schema
How do I generate a Material Design 3 theme from a brand color?

Install @material/material-color-utilities and run the generate-theme.mjs script with your hex color, for example node generate-theme.mjs "#FF9800". It outputs CSS custom properties for both light and dark themes derived from the HCT color space.

How to export Material 3 color tokens as CSS custom properties?

Run the generation script without flags to get CSS output with --md-sys-color-* variables under :root for light and [data-theme="dark"] for dark. Use the --json flag instead if you need a JSON token file.

What scheme variants does material-color-utilities support?

The library supports nine dynamic color schemes: tonal-spot, content, expressive, fidelity, fruit-salad, monochrome, neutral, rainbow, and vibrant. Select one with the --scheme flag, where tonal-spot is the default used by Android Material You.

Does the generated theme include surface container and fixed colors?

Yes. Surface container tokens are derived from the neutral palette at M3-specified tones, and fixed accent colors come from primary, secondary, and tertiary palettes at tones 10 through 90, matching the M3 specification.

Can I add custom brand colors to an M3 theme?

Yes, pass custom color definitions to themeFromSourceColor with a name, ARGB value, and blend flag. Setting blend to true harmonizes the custom color with the source color, while false preserves its exact hue.