Перейти к основному содержимому

Студия тем

Студия тем — интерактивный инструмент: выберите пресет, настройте цвет каждого токена, сразу увидите результат и в конце экспортируйте готовый к использованию SCSS-файл.

主色
主色
悬停
按压
主色底
主色边框
主色衍生
主色底文字
选中态文字
功能色
成功
警告
危险
信息
文本
主要文字
常规文字
次要文字
背景
容器背景
页面背景
边框
基础边框
浅边框
Живой предпросмотр
Основной тегТег успехаТег ошибки

Основной текст·Обычный текст·Второстепенный текст

Изменённые токены применяются только к области предпросмотра (тот же механизм, что у ConfigProvider). Экспортированный файл также поддерживает тёмный режим.

Экспорт SCSS

Как пользоваться​

  1. Выбор пресета: верхний выпадающий список переключает пять встроенных палитр (青花瓷 (сине-белый фарфор) / 松花绿 (зеленый сосны) / 朱砂 (киноварь) / 水墨 (тушь) / 藤黄 (gamboge)). Пресет переопределяет только те токены, которые он объявляет; остальные сохраняют текущие значения.
  2. Настройка токенов: у каждого токена есть пипетка и hex-текстовое поле, синхронизированные между собой. Необязательные токены, помеченные «следует за цепочкой по умолчанию» (например --lh-selected-color), можно оставить пустыми — тогда сохранится производное отношение по умолчанию из таблиц стилей.
  3. Предпросмотр: область предпросмотра рендерит настоящие компоненты lh-ui; токены внедряются как локальные CSS-переменные (тем же механизмом, что и LhConfigProvider) и действуют только на саму область предпросмотра, не затрагивая сайт. Переключайте светлый / тёмный режим, чтобы проверить тёмную адаптацию.
  4. Экспорт: скопированный или скачанный SCSS-текст уже содержит блок токенов :root и тёмный блок [data-theme='dark']; логика тёмной темы полностью однородна с пресет-механизмом share (пресет с тёмным основным цветом в тёмном режиме автоматически осветляет основной цвет, иначе кнопки сольются с фоном).

Структура экспортируемого текста​

/* lh-ui пользовательская тема — сгенерирована Студией тем (2026-01-01) */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  /* ... */
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  /* ... */
}
  • @use подключает полную базовую линию токенов; блок :root переопределяет только изменённые токены.
  • Тёмный блок выводится функцией buildPresetDarkVars и в точности совпадает с тем, что показывает область предпросмотра.

Замечания​

Писать только в элемент <style>

При применении переменных пресета необходимо писать в элемент <style> (специфичность 0,1,0) и не в inline-стиль documentElement — специфичность inline 1,0,0,0 выше любой таблицы стилей, и она перекроет весь блок тёмных переменных var-dark.scss, что исказит палитру тёмной темы. useLhPresetTheme из библиотеки и антифликер-скрипт этого сайта следуют этому правилу.

Контраст светлых основных цветов

Пресет со светлым основным цветом (например 松花绿 (зеленый сосны)) требует явного объявления --lh-color-on-primary(тёмный текст на основном цвете) и --lh-selected-color(отдельно утемнённый цвет выделенного текста), иначе белый текст на светлом основном цвете не достигнет контрастности AA. Встроенные пресеты уже обработаны; при настройке проверяйте самостоятельно.

Отношение с Vue-версией

Этот инструмент портирован из ThemeStudio lh-ui-plus; значения токенов по умолчанию, группы и логика тёмного вывода полностью идентичны, а экспортируемый SCSS одинаково применим в обеих библиотеках (определения токенов лежат в общем слое @lh-ui/share/styles/theme/common/var.scss).