// 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.
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | material-ui-theming |
| 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. |
| license | MIT |
| metadata | {"author":"mui","version":"1.0.0"} |
Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.
createTheme, ThemeProvider, useTheme, CssBaselinecolorSchemes, useColorScheme, storage / SSR behaviorcssVariables: true, theme.vars, applyStyles('dark', …)| 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 |
Read AGENTS.md for the complete instructions and links.
TypeScript snippets: reference.md.