Темы

Тематическая система семейства lh-ui определена в @lh-ui/share (единственный источник); Vue2-библиотека потребляет её через CSS-переменные.

CSS-переменные

Все токены имеют имена --lh-* и инжектируются в :root через @lh-ui/vue2/theme.css:

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* Полный список см. в источнике theme репозитория share */
}

Тёмная тема

<link rel="stylesheet" href="@lh-ui/vue2/theme-dark.css" />

<html data-theme="dark">

Также поддерживается форма с классом .dark. Переменные каскадируются от ConfigProvider или :root, сами компоненты их не дублируют.

Локальная настройка через ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">Бамбуково-зелёная кнопка</LhButton>
  </LhConfigProvider>
</template>

Приоритет: собственные themeVars компонента > componentTheme[имя компонента] > глобальные themeVars; узор bg-pattern дополнительно управляется белым списком patternComponents.

Пресеты тем и переключение пресетов

@lh-ui/vue2/theme переадресует TS-пресеты share (青花瓷 (сине-белый фарфор), 松花绿 (зелёный сосны) и т. д.) в паре с useLhPresetTheme:

import { useLhPresetTheme } from '@lh-ui/vue2'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // Записывает в :root; themeVars можно передать ConfigProvider для локального действия

useLhTheme отвечает за переключение светлой / тёмной темы (data-theme + сохранение в localStorage).