Темы
Переопределите семантические роли
Подключите свой CSS после base.css. Меняйте роли внутри wl.tokens и задайте data-wl-theme="gavia" и data-wl-brand="my-brand" на одном корневом элементе, как в стартере. Проверьте контраст текста, поверхностей и фокуса в каждом режиме. Значения ниже показывают подход, а не готовую палитру.
Показать Vue-код
/* Import after base.css, keeping the token layers. */
@layer wl.tokens {
[data-wl-theme="gavia"][data-wl-brand="my-brand"] {
--wl-accent: #245bd1;
--wl-text-accent: #245bd1;
--wl-focus-color: #245bd1;
}
}Выберите тему до монтирования
Задайте data-wl-theme корневому элементу документа или контейнеру. Публичный composable определяет светлый, тёмный и системный режимы. Его ранний скрипт помогает избежать вспышки другой темы при загрузке.
Показать Vue-код
import { useWlTheme } from "gavia-ui/composables";
const theme = useWlTheme({ themes: { light: "gavia", dark: "gavia-dark" } });Управляйте переходом в приложении
В themes можно передать реактивную функцию. Если пользователь выбрал конкретную тему, укажите её в обоих полях light и dark: смена системного режима её не заменит. С target: () => null composable только определяет тему, а приложение применяет её внутри своего перехода. Для SSR и раннего выбора есть чистая функция resolveWlTheme. Ранний скрипт wlThemeInitScript принимает обычную пару, без реактивной функции.
Закрепите декоративный цвет за именем
getWlColorFromString выбирает для одного имени один элемент палитры и при SSR, и в браузере. Пробелы по краям убираются, Unicode приводится к NFC. По умолчанию функция возвращает ссылки на базовые токены; для своего бренда передайте непустую палитру в фиксированном порядке. Сохраните имя человека и отдельно проверьте контраст: цвет не служит уникальным идентификатором.
Показать Vue-код
import { getWlColorFromString } from "gavia-ui/utils";
const outline = getWlColorFromString("Анна Михайлова");
const brandOutline = getWlColorFromString("Анна Михайлова", ["coral", "indigo"] as const);Настройте внутреннюю разметку
WlConfig.pt задаёт общие настройки, локальный pt — настройки одного экземпляра. Class и style объединяются в порядке: библиотека → приложение → экземпляр. В исходниках 1.0 используются новые имена секций; список удалённых алиасов есть в миграции. Для кнопок с иконкой служит отдельный ключ iconButton.