Skill

material-ui-theming

Name: material-ui-theming
Author: MUI (Material UI)

configure Material UI themes and tokens

Published by MUI (Material UI) Updated Jul 14

Covers TypeScript Themes UI Components Design

Description

Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.

SKILL.md

Material UI theming and design tokens

Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.

When to apply

createTheme, ThemeProvider, useTheme, CssBaseline
colorSchemes, useColorScheme, storage / SSR behavior
cssVariables: true, theme.vars, applyStyles('dark', …)
Custom theme keys and TypeScript module augmentation

Sections in AGENTS.md

Area	Topics
Core setup	Imports, provider placement, `useTheme`
Token map	palette, typography, spacing, shape, breakpoints, components, …
Palette	`main` / derived colors, `@mui/material/colors`, `mode`
Color schemes	vs palette-only, hydration, `ThemeProvider` props
CSS variables	`cssVariables`, reserved `vars`, flicker avoidance
Composition	Multi-step `createTheme`, `deepmerge`, nesting providers
Custom tokens	Augmenting `Theme` / `ThemeOptions`

Full guide

Read AGENTS.md for the complete instructions and links.

TypeScript snippets: reference.md.

More skills from the material-ui repository

View all 4 skills

SkillTagsUpdated