Темы

Тема в библиотеке представляет из себя набор дизайн-токенов ↗ в виде CSS-переменных ↗. Вот как это может выглядеть:

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

По умолчанию тема определяется автоматически в зависимости от используемого устройства, но вы можете задать поддержку только одной через свойство platform у ConfigProvider:

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 файл ↗)
  • dark – тема vkBaseDark (ссылка на CSS файл ↗)
• iOS
  • light – тема vkIOS (ссылка на CSS файл ↗)
  • dark – тема vkIOSDark (ссылка на CSS файл ↗)
• vkcom
  • light – тема vkCom (ссылка на CSS файл ↗)
  • dark – тема vkComDark (ссылка на CSS файл ↗)

Режимы

Каждая тема обычно поддерживает как светлый (англ. light), так и тёмный (англ. dark) режим. За его определение отвечает свойство colorScheme, и также как platform, по умолчанию, определяется автоматически за счёт CSS медиа выражения prefers-color-scheme ↗.

Ручное определение будет выглядеть так:

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. Убедитесь, что потомок ColorSchemeProvider принимает свойство className, иначе переопределить тему не получится.

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

Чтобы получить значение текущего режима, используйте хук useColorScheme. Это может пригодиться для замены изображений на инвертированную версию в темных темах. Пример:

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