MU
material-ui-theming
Помогает настраивать темы Material UI с помощью createTheme, ThemeProvider, палитр, цветовых схем и cssVariables. Полезно при создании тем, переключении светлого/темного режима и синхронизации токенов в приложении.
Что делает навык
Настраивает темы Material UI с использованием createTheme, ThemeProvider и палитр, поддерживая светлый и темный режимы, а также CSS-переменные. Позволяет синхронизировать токены дизайна и управлять цветовыми схемами в приложении.
Когда применять
- Создание базовой темы приложения с использованием createTheme и ThemeProvider
- Переключение между светлым и темным режимами с учетом SSR и гидратации
- Использование CSS-переменных (cssVariables) для избежания мерцания при смене темы
- Расширение темы кастомными токенами через TypeScript module augmentation
Как работает
- Импортировать необходимые компоненты (createTheme, ThemeProvider, useTheme, CssBaseline) и настроить их размещение.
- Определить карту токенов (palette, typography, spacing, breakpoints, components) в createTheme.
- Настроить цветовые схемы (colorSchemes) или палитру (palette), используя main/derived цвета или @mui/material/colors.
- При необходимости включить cssVariables: true для использования theme.vars и applyStyles для избежания мерцания.
- Применить deepmerge или вложенные провайдеры для композиции тем.
- Расширить типы темы через augmentation для поддержки кастомных токенов.
Примеры запросов агенту
Как настроить темную тему Material UI с использованием createTheme и ThemeProvider?
Как переключать светлый и темный режимы с учетом SSR и избежать мерцания?
Как добавить кастомные токены в тему Material UI с помощью TypeScript?
Что понадобится
- Рекомендации по чтению AGENTS.md для полных инструкций
- Справочник TypeScript в reference.md
Описание составлено по SKILL.md навыка, сверено 09.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «material-ui-theming» из репозитория:
# https://github.com/mui/material-ui
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r material-ui-theming/ ~/.claude/skills/material-ui-theming/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.