---
name: mui-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:
  decimalai-skill-id: "9def678d-65ca-4437-9a95-58447945e2c9"
  decimalai-version-id: "a21a8c2d-b5d6-41e3-87bd-71c1f2962c9d"
  decimalai-version: "1"
  decimalai-body-sha256: "b54f44967436caeed9755d060c0d1dc4a25d2278975fdcc6bd94caad7f0deec6"
  decimalai-name: "mui/material-ui-theming"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/mui-material-ui-theming@1/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](./AGENTS.md) for the complete instructions and links.

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