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, CssBaselinecolorSchemes, useColorScheme, storage / SSR behaviorcssVariables: 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.
1---2name: material-ui-theming3description: 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.4license: MIT5---6
7# Material UI theming and design tokens
8
9Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.
10
11## When to apply
12
13- `createTheme`, `ThemeProvider`, `useTheme`, `CssBaseline`
14- `colorSchemes`, `useColorScheme`, storage / SSR behavior
15- `cssVariables: true`, `theme.vars`, `applyStyles('dark', …)`
16- Custom theme keys and TypeScript module augmentation
17
18## Sections in AGENTS.md
19
20| Area | Topics |
21| :------------ | :-------------------------------------------------------------- |
22| Core setup | Imports, provider placement, `useTheme` |
23| Token map | palette, typography, spacing, shape, breakpoints, components, … |
24| Palette | `main` / derived colors, `@mui/material/colors`, `mode` |
25| Color schemes | vs palette-only, hydration, `ThemeProvider` props |
26| CSS variables | `cssVariables`, reserved `vars`, flicker avoidance |
27| Composition | Multi-step `createTheme`, `deepmerge`, nesting providers |
28| Custom tokens | Augmenting `Theme` / `ThemeOptions` |
29
30## Full guide
31
32Read [AGENTS.md](./AGENTS.md) for the complete instructions and links.
33
34TypeScript snippets: [reference.md](./reference.md).
mui