---
description:
  VKUI поддерживает три темы - `vkBase`, `vkIOS` и `vkCom` в двух цветовых режимах (светлом и тёмном).
  Это позволяет компонентам визуально мимикрировать под соответствующую платформу и выглядеть неотличимо от нативных приложений.
---

<Overview type="doc">
# Темы

VKUI поддерживает три темы - `vkBase` (по умолчанию), `vkIOS` (на платформе iOS) и `vkCom` (на платформе vkcom)
в двух цветовых режимах (светлом и тёмном).
Это позволяет компонентам визуально мимикрировать под соответствующую платформу и выглядеть неотличимо от нативных приложений.

</Overview>

Тема в библиотеке — это набор [дизайн-токенов](https://foundation.mozilla.org/en/docs/design/websites/design-tokens/) в виде [CSS-переменных](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Пример:

```css
.SomeComponent {
  color: var(--vkui--color_text_primary);
  background: var(--vkui--color_background_content);
}
```

По умолчанию тема определяется автоматически по устройству, но можно ограничиться одной через свойство `platform` у [`ConfigProvider`](/components/config-provider):

```jsx
import { ConfigProvider, AdaptivityProvider, AppRoot, SimpleCell } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

<ConfigProvider platform="ios">
  <AdaptivityProvider>
    <AppRoot>
      <SimpleCell>Темным-темно</SimpleCell>
    </AppRoot>
  </AdaptivityProvider>
</ConfigProvider>;
```

Стили из `import '@vkontakte/vkui/dist/vkui.css'` содержат 3 темы, которые автоматически меняются по платформе и режиму:

- android (используется по умолчанию)
  - `light` – тема `vkBase` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css))
  - `dark` – тема `vkBaseDark` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css))
- iOS
  - `light` – тема `vkIOS` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css))
  - `dark` – тема `vkIOSDark` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css))
- vkcom
  - `light` – тема `vkCom` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css))
  - `dark` – тема `vkComDark` ([ссылка на CSS файл](https://esm.cdn-vk.ru/@vkontakte/vkui-tokens@4/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css))

## Режимы [#modes]

Каждая тема обычно поддерживает <i>светлый (`light`)</i> и <i>тёмный (`dark`)</i> режим. За выбор отвечает свойство `colorScheme` — как и `platform`, по умолчанию определяется автоматически через медиавыражение [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

Ручное определение:

```jsx {4}
import { ConfigProvider, AdaptivityProvider, AppRoot, SimpleCell } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

<ConfigProvider colorScheme="dark">
  <AdaptivityProvider>
    <AppRoot>
      <SimpleCell>Темным-темно</SimpleCell>
    </AppRoot>
  </AdaptivityProvider>
</ConfigProvider>;
```

Чтобы переопределить режим для отдельных компонентов, используйте [`ColorSchemeProvider`](/components/color-scheme-provider). Потомок `ColorSchemeProvider` должен принимать свойство `className`, иначе тему переопределить не получится.

```jsx
<ColorSchemeProvider value="dark">
  <Snackbar action="Поделиться">Поделиться</Snackbar>
</ColorSchemeProvider>
```

Текущий режим возвращает хук `useColorScheme`. Пригодится, чтобы менять изображения на инвертированные в тёмной теме. Пример:

```jsx
const colorScheme = useColorScheme();
<Div>{colorScheme === 'light' ? 'Out of the blue' : 'And into the black'}</Div>;
```

> Учтите, что некоторые компоненты делегируют цвет фона родителю выше — например, [Cell](/components/cell) и его производные.
>
> На примере [SimpleCell](/components/simple-cell) покажем решение: зададим фон через `className` или `style`:
>
> ```jsx
> <Group header={<Header>Настройка тем</Header>}>
>   <SimpleCell before={<Icon20PalleteOutline />}>Системная тема</SimpleCell>
>   <ColorSchemeProvider value="dark">
>     <SimpleCell
>       before={<Icon20MoonOutline />}
>       style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
>     >
>       Тёмная тема
>     </SimpleCell>
>   </ColorSchemeProvider>
>   <ColorSchemeProvider value="light">
>     <SimpleCell
>       before={<Icon20SunOutline />}
>       style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
>     >
>       Светлая тема
>     </SimpleCell>
>   </ColorSchemeProvider>
> </Group>
> ```