Предустановленные темы

В lh-ui-plus встроено 5 предустановленных тем в китайском стиле, готовых к использованию. Два способа применения:

• Глобальное переключение (рекомендуется): useLhPresetTheme записывает переменные пресета в :root, тема применяется ко всему сайту и сохраняется в localStorage.
• Локальное переключение: LhConfigProvider :theme-vars влияет только на поддерево — удобно для параллельного показа нескольких тем на одной странице.

Переменные пресета можно получить через getThemeVars(name) (из @lh-ui/vue3/theme), значения name — в разделах ниже.

Переключение темы на уровне сайта

На этом сайте в верхней панели навигации есть выпадающее меню «Тема-пресет» для мгновенного переключения между 5 темами в китайском стиле. Выбор сохраняется в localStorage['lh-docs-preset'] и переживает обновление страницы.

Пресеты тем и светлая/тёмная тема — две независимые оси: переключатель 🌙/☀️ справа в навигации VitePress меняет светлую/тёмную тему, а меню «Тема-пресет» — палитру (青花瓷 (сине-белый фарфор), 朱砂 (киноварь), 松花绿 (сосново-зелёный) и т. д.). В тёмной теме пресеты также действуют — как тёмные темы разных оттенков.

Общие свойства темы themeVars и bgPattern

Все компоненты lh-ui-plus поддерживают локальное переопределение темы через LhConfigProvider или собственный проп themeVars; узорные фоны управляются единым образом через атрибут bgPattern (узоры разрешаются белым списком patternComponents в ConfigProvider). Это кросс-компонентные возможности, поэтому они не демонстрируются на каждой странице компонента — всё собрано в разделах Настройка темы и Система узорных фонов.

青花瓷 (сине-белый фарфор) (по умолчанию)

Тема по умолчанию: подглазурная роспись 青花瓷, изящная и сдержанная. Имя пресета: cerblue.

Тема 青花瓷

Тег

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

// getThemeVars возвращает ключи уже с префиксом --lh-, обработка префикса в ConfigProvider идемпотентна — можно передавать напрямую
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhButton type="success">Успех</LhButton>
      <LhButton type="warning">Предупреждение</LhButton>
      <LhButton type="danger">Опасность</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

松花绿 (сосново-зелёный)

Густой бамбуковый лес, полный жизни. Имя пресета: songhua.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const songhuaTheme = getThemeVars('songhua')
</script>

<template>
  <LhConfigProvider :theme-vars="songhuaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

朱砂 (киноварь)

Традиционный красный цвет печатей 朱砂 — праздничный и торжественный. Имя пресета: zhusha.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const zhushaTheme = getThemeVars('zhusha')
</script>

<template>
  <LhConfigProvider :theme-vars="zhushaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

水墨 (тушь)

Живопись тушью 水墨丹青 — лаконичная и утончённая. Имя пресета: shuimo.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const shuimoTheme = getThemeVars('shuimo')
</script>

<template>
  <LhConfigProvider :theme-vars="shuimoTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

藤黄 (gamboge)

Глубокая осенняя кленовая желтизна — тёплое золото. Имя пресета: golden.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const goldenTheme = getThemeVars('golden')
</script>

<template>
  <LhConfigProvider :theme-vars="goldenTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Сравнение тем

Тема	Имя пресета	Основной цвет --lh-primary-color	Фон основного цвета --lh-primary-color-bg	Описание
青花瓷 (сине-белый фарфор)	cerblue	#2B4C7C	#E8EDF3	подглазурная роспись 青花瓷, изящная и сдержанная
松花绿 (сосново-зелёный)	songhua	#5B8C5A	#E8F5E8	густой бамбуковый лес, полный жизни
朱砂 (киноварь)	zhusha	#B23A3A	#FDF0F0	традиционный красный цвет печатей 朱砂, праздничный и торжественный
水墨 (тушь)	shuimo	#2C2C2C	#F5F5F5	живопись тушью 水墨丹青, лаконичная и утончённая
藤黄 (gamboge)	golden	#B8860B	#FBF6EA	глубокая осенняя кленовая желтизна, тёплое золото

Пресеты переопределяют только палитру основного цвета (primary); --lh-primary-color-bg — это осветлённый фоновый оттенок основного цвета, а не цвет фона всей страницы.

Программное переключение

Два механизма — выбирайте по области действия:

• Глобальное переключение (рекомендуется): useLhPresetTheme записывает переменные пресета в :root, тема применяется ко всему сайту и сохраняется в localStorage — выбор переживает обновление страницы. Обёртка LhConfigProvider не нужна.
• Локальное переключение: LhConfigProvider :theme-vars влияет только на поддерево — удобно для параллельного показа нескольких тем на одной странице.

Глобальное переключение пресетов

Эта группа кнопок записывает значения в :root, поэтому она повлияет на весь сайт документации — именно поэтому глобальное переключение здесь отдельно не демонстрируется.

<script setup lang="ts">
import { LhButton, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets } = useLhPresetTheme()
</script>

<template>
  <LhButton
    v-for="theme in presets"
    :key="theme.name"
    :type="preset === theme.name ? 'primary' : 'default'"
    @click="setPreset(theme.name)"
  >
    {{ theme.label }}
  </LhButton>
</template>

Локальное переключение

Передайте applyToRoot: false, чтобы отключить глобальную запись и получить только возвращаемые themeVars (с убранным префиксом --lh- по соглашению ConfigProvider), а область действия передать Provider.

Кнопки переключения должны располагаться снаружи LhConfigProvider, иначе они сами перекрасятся под тему:

Локальное переключение пресета

Тег

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme({ applyToRoot: false })
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px">
    <LhButton
      v-for="theme in presets"
      :key="theme.name"
      :type="preset === theme.name ? 'primary' : 'default'"
      @click="setPreset(theme.name)"
    >
      {{ theme.label }}
    </LhButton>
  </div>
  <LhConfigProvider :theme-vars="themeVars">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Основная кнопка</LhButton>
      <LhButton type="success">Успех</LhButton>
      <LhButton type="warning">Предупреждение</LhButton>
      <LhButton type="danger">Опасность</LhButton>
      <LhTag type="primary">Тег</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Обработка префикса: обработка префиксов в ConfigProvider идемпотентна — getThemeVars() (из @lh-ui/vue3/theme) возвращает ключи уже с префиксом --lh-, их можно передавать в :theme-vars напрямую; а themeVars из useLhPresetTheme() возвращается без префикса. Оба варианта годятся для :theme-vars без дополнительной обработки.