# @cloud-ru/ds-theme > Провайдер оформления — оси (цветовая схема, бренд, плотность, акрил) живут в контексте, полный набор sn-* классов эмитится на DOM-границе. Docs: /snack-v2/components/theme/ ## Установка ```sh pnpm add @cloud-ru/ds-theme ``` ## Когда использовать - Хост-приложение задаёт оформление в корне: `RootThemeProvider value={{ colorScheme, brand, density }}` (или `store` для multi-root / MFE через `getGlobalThemeStore().store`). - Цветовая схема light/dark берётся из `useColorScheme` (`prefers-color-scheme` + опциональный персист-адаптер) и передаётся в `value.colorScheme`. - Часть дерева должна иметь другой бренд / плотность / схему — `ChildThemeProvider` сливает partial-переопределение с ближайшим контекстом. - Компонент локально фиксирует ось (мобильная обёртка с `density: 'comfort'`) — `useThemeClassnames({ density })` подмешивает текущие colorScheme/brand из контекста. - Нужен бренд-цвет вне предустановленного набора (white-label под клиента) — `RootThemeProvider brandColor='#RRGGBB'` (декларативно) либо хук `useApplyCustomTheme({ color })` (императивно). > Полный набор `sn-*` обязателен на каждой границе: классы токенов не переопределяются по одной оси через CSS-каскад. Никогда не ставьте одиночный `sn-comfort` руками — для этого есть провайдеры и хук. Старый `ThemeProvider` / `useThemeConfig` (произвольные темы по `themeMap`) — отдельный legacy-механизм, не путать с `RootThemeProvider`. ## API ### ChildThemeProvider | Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | `children` | `string \| number \| boolean \| ReactElement> \| Iterable \| ReactPortal \| null \| undefined` | — | yes | | | `className` | `string` | — | no | Дополнительный класс на wrapper-`
` (паддинги/фон). Только в wrapper-режиме (без `rootRef`). | | `rootRef` | `RefObject` | — | no | Внешний элемент для полного слитого набора `sn-*`. Если не задан — провайдер оборачивает children в `
` с этим набором. | | `value` | `Partial` | — | yes | Оси, переопределяемые в поддереве. Остальные наследуются от ближайшего родителя (слияние). | #### Related types - `Brand` = `brandA | brandB | brandC | brandD | brandE` - `BrandRole` = `alter | alter2 | alter3 | alter4 | main` - `ColorScheme` = `dark | light` - `Density` = `comfort | compact | spacious` - `ThemeAppearance` (interface) ### RootThemeProvider | Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | `brandColor` | `string` | — | no | Кастомный бренд-цвет потребителя (hex `#rrggbb`) для white-label. Генерирует бренд-палитру из seed-цвета и инжектит scoped `