material-ui-theming

v2026.09.24

mui/material-ui00

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.

Install command

npx skhub add mui/material-ui-theming

Markdown

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.

Install command

npx skhub add mui/material-ui-theming

Discovery

Tags

No tags published for this skill.

Version

Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

MIT

Source path

skills/material-ui-theming

Default branch

master

Latest commit

7f1d0d7

Tree SHA

19e1200