# Студия тем

Не хотите ограничиваться пресетами? Выберите в студии ниже пресет как отправную точку, настройте каждый токен под свою палитру — область предпросмотра обновится в реальном времени, а на выходе получится scss-файл, который можно поместить прямо в проект — без перекомпиляции библиотеки компонентов.

Основной цвет

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

Производные основного

--lh-color-on-primary

--lh-selected-color

Функциональные цвета

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

Текст

--lh-text-primary

--lh-text-regular

--lh-text-secondary

Фон

--lh-bg-color

--lh-bg-color-page

Граница

--lh-border-color-base

--lh-border-color-light

Живой предпросмотр

标签标签标签

主要文字·常规文字·次要文字

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

Экспорт SCSS

# Принятие экспортированной темы

Файл, экспортируемый студией, выглядит так (источник токенов — @lh-ui/share/styles/theme/common/var.scss):

@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);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
}

Два способа применения:

Способ 1: статическое подключение (рекомендуется) — поместите экспортированный lh-theme.scss в проект и подключите его во входной точке:

// main.js
import './lh-theme.scss'

@use '@lh-ui/share/styles/index.scss' уже включает все стили компонентов и токены темы — одной строки достаточно; тёмный блок и пресет-механизм share имеют общее происхождение, при data-theme="dark" переключение происходит автоматически.

Способ 2: внедрение во время выполнения — локальное переопределение через prop themeVars компонента LhConfigProvider (ключи в сокращённой форме, префикс --lh- добавляется автоматически); подходит, когда на одной странице соседствуют несколько тем:

<template>
  <LhConfigProvider :theme-vars="{ primaryColor: '#2B4C7C', onPrimary: '#FFFFFF' }">
    <LhButton type="primary">Главная кнопка</LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

Примеры кода везде используют npm-имёна пакетов (@lh-ui/vue2 / @lh-ui/share) — копируйте и используйте; реальная работа этого сайта документации идёт на локальных исходниках семейства, поэтому изменения видны сразу.

# Замечания

Для светлого основного цвета необходимо явно объявить --lh-color-on-primary: белый текст на светлом основном цвете не соответствует контрасту AA (4.5:1), поэтому в пресетах 松花绿 (зелёный сосны) и 藤黄 (gamboge) используется тёмный текст. Поле «Текст на основном цвете» в студии соответствует этому токену.
Если --lh-selected-color оставить пустым, он следует стандартной цепочке --lh-primary-color-active; при светлом основном цвете выделенный текст часто приходится отдельно затемнять (в пресетах это также учтено).
Контрастный гейт: pnpm verify:theme в share пересчитывает AA-контраст каждого пресета по реальным парам потребления; для пользовательской темы рекомендуется проверить себя по инструкциям в Темы.

← Темы