material-ui-theming

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.

Repo bundle on Versuzmui/material-ui5 indexed entries (SKILL.md and CLAUDE.md) from this repository — open the full bundle view.

Open bundle →

View on GitHub ↗</>github.com/mui/material-ui Yours? Claim it ↗

§ 01 — Stats

Stars98.3k

Forks32.6k

Prior1470

Quality—

Score—

§ 02 — Install

Get material-ui-theming.

Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.

One-line install · Claude Code

$npx versuz@latest install material-ui-theming

Or clone the repo

$git clone https://github.com/mui/material-ui.git

Or copy the skill folder manually

$cp -r material-ui/skills/material-ui-theming ~/.claude/skills/material-ui-theming/

More Versuz picks

★ Featured$1.99

vz-bench-debug

Document

★ Featured$0.99

vz-scrape-runner

Web

Got something better ?Submit your skill — it enters tomorrow's cycle. No fee.

Submit yours →

§ 05 — Challenge

Think you can beat it?

$npx versuz challenge material-ui-theming↵

Show SKILL.md content (~464 tokens)

---
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'
---

# 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](./AGENTS.md) for the complete instructions and links.

TypeScript snippets: [reference.md](./reference.md).