Thèmes prédéfinis

lh-ui-plus intègre 5 thèmes prédéfinis au style chinois, utilisables sans configuration. Deux modes d'emploi :

• Bascule globale (recommandé) : useLhPresetTheme écrit les variables du préréglage dans :root, effective sur tout le site et persistée dans localStorage.
• Bascule locale : LhConfigProvider :theme-vars n'affecte que son propre sous-arbre, adapté à la présentation côte à côte de plusieurs thèmes au sein d'une même page.

Les variables du préréglage peuvent être obtenues via getThemeVars(name) (provenant de @lh-ui/vue3/theme), les valeurs possibles de name sont indiquées dans les sections ci-dessous.

Bascule de thème au niveau du site

Ce site propose un menu déroulant « Préréglage de thème » dans la barre de navigation supérieure, permettant de basculer en un clic entre les 5 thèmes au style chinois. Le choix est persisté dans localStorage['lh-docs-preset'] et conservé après un rafraîchissement.

Les préréglages de thème et le mode clair / sombre sont deux axes indépendants : la bascule 🌙/☀️ à droite de la barre de navigation VitePress commute le mode clair / sombre, tandis que le menu déroulant « Préréglage de thème » commute la palette (porcelaine bleue et blanche, cinabre, vert pin, etc.). En mode sombre, les préréglages s'appliquent également, sous la forme de thèmes sombres aux teintes différentes.

Les props themeVars et bgPattern communes

Tous les composants de lh-ui-plus prennent en charge la substitution locale du thème via LhConfigProvider ou la prop themeVars du composant lui-même ; le fond à motifs est contrôlé de manière uniforme par la prop bgPattern (les motifs proviennent de la liste blanche patternComponents du ConfigProvider). Ces deux propriétés étant des capacités communes à tous les composants, elles ne sont pas détaillées dans chaque documentation de composant, mais expliquées de manière centralisée dans Personnalisation du thème et Système de fonds à motifs.

青花瓷 / Porcelaine bleue et blanche (par défaut)

Thème par défaut, émail sous couverte de la porcelaine bleue et blanche, élégant et épuré. Nom du préréglage : cerblue.

Thème porcelaine bleue et blanche

Étiquette

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

// Les clés renvoyées par getThemeVars portent déjà le préfixe --lh-, le traitement
// du préfixe par ConfigProvider est idempotent, elles peuvent être passées telles quelles
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Bouton principal</LhButton>
      <LhButton type="success">Succès</LhButton>
      <LhButton type="warning">Avertissement</LhButton>
      <LhButton type="danger">Danger</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

松花绿 / Vert pin

L'ombre fraîche d'une forêt de bambous, pleine de vitalité. Nom du préréglage : 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">Bouton principal</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

朱砂 / Cinabre

Le rouge cinabre des sceaux traditionnels, festif et solennel. Nom du préréglage : 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">Bouton principal</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

水墨 / Encre de Chine

La peinture à l'encre de Chine, épurée et minimaliste. Nom du préréglage : 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">Bouton principal</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

藤黄 / Gamboge

Le jaune doré des érables en plein automne, une chaleur dorée. Nom du préréglage : 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">Bouton principal</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Comparaison des thèmes

Thème	Nom du préréglage	Couleur principale --lh-primary-color	Fond de la couleur principale --lh-primary-color-bg	Description
青花瓷 (porcelaine bleue et blanche)	cerblue	#2B4C7C	#E8EDF3	Émail sous couverte de la porcelaine bleue et blanche, élégant et épuré
松花绿 (vert pin)	songhua	#5B8C5A	#E8F5E8	L'ombre fraîche d'une forêt de bambous, pleine de vitalité
朱砂 (cinabre)	zhusha	#B23A3A	#FDF0F0	Le rouge cinabre des sceaux traditionnels, festif et solennel
水墨 (encre de Chine)	shuimo	#2C2C2C	#F5F5F5	La peinture à l'encre de Chine, épurée et minimaliste
藤黄 (gamboge)	golden	#B8860B	#FBF6EA	Le jaune doré des érables en plein automne, une chaleur dorée

Les préréglages ne couvrent que la palette de la couleur principale (primary) ; --lh-primary-color-bg est la couleur de fond atténuée de la couleur principale, et non la couleur de fond de toute la page.

Bascule programmatique

Deux mécanismes, à choisir selon la portée :

• Bascule globale (recommandé) : useLhPresetTheme écrit les variables du préréglage dans :root, effective sur tout le site et persistée dans localStorage, le choix étant conservé après un rafraîchissement. Aucun besoin d'envelopper avec LhConfigProvider.
• Bascule locale : LhConfigProvider :theme-vars n'affecte que son propre sous-arbre, adapté à la présentation côte à côte de plusieurs thèmes au sein d'une même page.

Bascule globale du préréglage

La série de boutons de bascule ci-dessous écrit dans :root, c'est pourquoi l'ensemble du site de documentation est affecté — c'est également la raison pour laquelle cette page ne démontre pas la bascule globale séparément.

<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>

Bascule à portée locale

Passer applyToRoot: false désactive l'écriture globale et permet de récupérer uniquement les themeVars renvoyés (dépourvus du préfixe --lh- selon la convention de ConfigProvider), la portée étant alors prise en charge par le Provider.

Les boutons de bascule doivent être placés à l'extérieur du LhConfigProvider, sans quoi les boutons eux-mêmes seront recolorés par le thème :

Bascule locale du préréglage

Étiquette

<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">Bouton principal</LhButton>
      <LhButton type="success">Succès</LhButton>
      <LhButton type="warning">Avertissement</LhButton>
      <LhButton type="danger">Danger</LhButton>
      <LhTag type="primary">Étiquette</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Écriture des préfixes : le traitement du préfixe par ConfigProvider est idempotent ; les clés renvoyées par getThemeVars() (provenant de @lh-ui/vue3/theme) portent déjà le préfixe --lh- et peuvent être passées telles quelles à :theme-vars, tandis que les themeVars renvoyés par useLhPresetTheme() en sont déjà dépourvus. Les deux peuvent être utilisés directement avec :theme-vars, sans traitement supplémentaire.