Темы
VKUI поддерживает три темы - vkBase (по умолчанию), vkIOS (на платформе iOS) и vkCom (на платформе vkcom)
в двух цветовых режимах (светлом и тёмном).
Это позволяет компонентам визуально мимикрировать под соответствующую платформу и выглядеть неотличимо от нативных приложений.
Тема в библиотеке — это набор дизайн-токенов ↗ в виде 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, по умолчанию определяется автоматически через медиавыражение 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>;