skills.rest
ishiyan
ishiyanCOMMUNITY
Explore all skills by this author →
GitHub

material-theme-builder

Generate M3 light and dark color themes from a single source color.

Updated Nov 24, 2021
Search Tags:#css#theme#tokens#generate#m3#palettes#material-color-utilities
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill material-theme-builder-ishiyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-theme-builder
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-theme-builder
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-theme-builder-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Design teams and developers often struggle to create cohesive color systems for brands. This skill automates the generation of complete Material Design 3 palettes from a single source color using the Material Color Utilities, delivering consistent light and dark themes ready for integration.

Core Features & Use Cases

  • Generate light and dark color palettes from a single source color using M3 rules and semantic mapping.
  • Export tokens as CSS custom properties or JSON for use in web and app projects.
  • Enable brand-driven themes with configurable schemes and token sets across platforms.

Quick Start

Provide a source hex color and run the generate-theme.mjs script to create CSS or JSON tokens.

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 Material Design 3 color palettes from a single brand color?▼

To generate Material Design 3 color palettes from a single source color, provide a hex color and run the generate-theme.mjs script to create complete light and dark themes.

Can I export M3 theme tokens as CSS variables or JSON for web projects?▼

Yes, you can export M3 theme tokens as CSS custom properties or JSON. The generate-theme.mjs script outputs these formats for direct integration into web and app projects.

Does generating M3 themes require installing the material-color-utilities package?▼

Yes, generating M3 themes requires installing the @material/material-color-utilities package. This dependency provides the core rules and semantic mapping for the color schemes.

What is the best way to create consistent light and dark themes for brand-driven apps?▼

The best way to create consistent light and dark themes is by automating palette generation from a single source color using M3 rules, delivering configurable schemes and token sets across platforms.

Are there limitations when using a single source color to generate M3 palettes?▼

Generating M3 palettes from a single source color relies strictly on Material Design 3 semantic mapping rules, meaning your output schemes are constrained by the M3 design system guidelines.

Related Skills

Explore More Design & Creative Skills→
shelbeelyshelbeely
4

material-theme-builder

Generate Material Design 3 color themes from a source color using @material/material-color-utilities.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
bRRRITSCOLDbRRRITSCOLD
2

design-theming

Derive and apply design themes from a base token file with per-brand JSON overrides.

Community
Intermediate
VitorM147VitorM147

create-m3-theme

Integrates Angular-Material-M3 themes into Juice Shop's frontend and legacy systems.

Community
Intermediate