Personnalisation du thème

lh-ui-plus fournit un système complet de thèmes à base de variables CSS, offrant des capacités de personnalisation riches : palette de couleurs au style chinois, mode sombre, fonds à motifs, bascule à l'exécution, etc.

Vous souhaitez ajuster les couleurs visuellement et exporter directement un fichier scss ? Voir le Studio de thèmes.

Système de couleurs au style chinois

La bibliothèque de composants s'inspire de la peinture traditionnelle à l'encre de Chine et définit 8 thèmes de couleurs au style chinois :

Couleur	Symbolique	Teinte principale	Survol	Usage
Indigo	Le bleu de la porcelaine bleue et blanche	`#2B4C7C`	`#3D649E`	Bouton principal, liens, état de focus
松花绿 (vert pin)	La fraîcheur des ombres de bambou	`#5B8C5A`	`#6FA36E`	État de succès
藤黄 (gamboge)	L'or des feuilles d'automne	`#C4A35A`	`#D4B76F`	État d'avertissement
朱砂 (cinabre, danger)	Le rouge du pastel de sceau	`#B23A3A`	`#C45050`	État de danger / erreur (`--lh-danger-*`)
黛色 (gris ardoise)	Les teintes légères de l'encre de Chine	`#7A7A7A`	`#8F8F8F`	État d'information
Or	L'élégance précieuse des temps anciens	`#B8860B`	`#D4A843`	Touches décoratives (`--lh-gold-*`)
朱砂红 (rouge vermillon, accent)	Variante d'accentuation tirant sur le vermillon	`#C43A31`	`#E85D4A`	Couleur d'accent (`--lh-vermilion-*`)
玉色 (vert jade)	L'élégance du bambou émeraude	`#5B8C5A`	`#7AAE7A`	Succès / décoration (même valeur que le vert pin)

Chaque couleur comprend généralement 4 niveaux (teinte principale / survol / activation / fond clair) ; la teinte principale et l'or fournissent en plus une couleur de bordure lighter (*-color-border), afin de garantir un contraste approprié dans tous les contextes.

Système de thèmes à variables CSS

Toutes les couleurs du thème sont implémentées via des propriétés personnalisées CSS (--lh-*), au nombre de 88+, couvrant les catégories suivantes :

Variables de couleur

Préfixe de variable	Description	Exemple
`--lh-primary-color`	Valeur de base de la teinte principale	`#2B4C7C`
`--lh-primary-color-hover`	État de survol de la teinte principale	`#3D649E`
`--lh-primary-color-active`	État d'activation de la teinte principale	`#1F3A5F`
`--lh-primary-color-bg`	Fond clair de la teinte principale	`#E8EDF3`
`--lh-success-color`	Couleur de succès	`#5B8C5A`
`--lh-warning-color`	Couleur d'avertissement	`#C4A35A`
`--lh-danger-color`	Couleur de danger	`#B23A3A`
`--lh-info-color`	Couleur d'information	`#7A7A7A`

Variables de texte

Nom de la variable	Description	Valeur par défaut
`--lh-text-primary`	Texte principal	`#2C2C2C`
`--lh-text-regular`	Texte courant	`#5A5A5A`
`--lh-text-secondary`	Texte secondaire	`#8A8A8A`
`--lh-text-placeholder`	Espace réservé	`#B0B0B0`
`--lh-text-disabled`	Texte désactivé	`#C8C8C8`

Variables de bordure

Nom de la variable	Description	Valeur par défaut
`--lh-border-color-base`	Bordure par défaut	`#D8D3CC`
`--lh-border-color-light`	Bordure légère	`#E5E0D8`
`--lh-border-radius-base`	Arrondi de base	`2px`
`--lh-border-radius-round`	Arrondi en capsule	`20px`

Variables de fond

Nom de la variable	Description	Valeur par défaut
`--lh-bg-color`	Fond des composants	`#FAF6F0` (blanc papier de riz)
`--lh-bg-color-page`	Fond de page	`#F5F0EB`
`--lh-bg-color-overlay`	Fond du calque de masque	`rgba(26, 26, 26, 0.4)`

Variables d'ombre

Nom de la variable	Description
`--lh-box-shadow-base`	Ombre par défaut
`--lh-box-shadow-light`	Ombre légère
`--lh-box-shadow-lighter`	Ombre très légère

Variables de police

Nom de la variable	Description	Valeur par défaut
`--lh-font-family`	Famille de polices	`Noto Serif SC, STSong, SimSun...`
`--lh-font-size-base`	Taille de base	`14px`
`--lh-font-size-small`	Petite taille	`13px`
`--lh-font-weight-primary`	Graisse courante	`400`
`--lh-font-line-height-primary`	Interligne	`1.8`

Variables d'espacement

Nom de la variable	Valeur	Usage
`--lh-spacing-xs`	`4px`	Espacement minimal
`--lh-spacing-sm`	`8px`	Petit espacement
`--lh-spacing-md`	`12px`	Espacement moyen
`--lh-spacing-base`	`16px`	Espacement de base
`--lh-spacing-lg`	`20px`	Grand espacement
`--lh-spacing-xl`	`24px`	Espacement très grand

Variables de z-index

Nom de la variable	Valeur	Usage
`--lh-z-index-dropdown`	`1000`	Menu déroulant
`--lh-z-index-modal`	`1050`	Boîte de dialogue modale
`--lh-z-index-tooltip`	`2000`	Infobulle

Variables de transition

Nom de la variable	Valeur	Description
`--lh-transition-duration-fast`	`0.25s`	Transition rapide
`--lh-transition-duration-base`	`0.3s`	Transition par défaut
`--lh-transition-duration-slow`	`0.4s`	Transition lente

Thème sombre

La bibliothèque de composants intègre des styles de thème sombre : toutes les variables CSS basculent automatiquement vers des valeurs adaptées en mode sombre.

Approche 1 : utiliser la fonction composable `useLhTheme`

Composition API

vue

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

const { theme, toggleTheme, setTheme } = useLhTheme()
</script>

<template>
  <div>
    <LhButton @click="toggleTheme">
      {{ theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre' }}
    </LhButton>
    <LhButton @click="() => setTheme('light')">Mode clair</LhButton>
    <LhButton @click="() => setTheme('dark')">Mode sombre</LhButton>
  </div>
</template>

Options API

vue

<script>
import { useLhTheme } from '@lh-ui/vue3'

export default {
  setup() {
    const { theme, toggleTheme, setTheme } = useLhTheme()
    return { theme, toggleTheme, setTheme }
  },
}
</script>

<template>
  <div>
    <LhButton @click="toggleTheme">
      {{ theme === 'dark' ? 'Passer en mode clair' : 'Passer en mode sombre' }}
    </LhButton>
  </div>
</template>

useLhTheme persiste automatiquement l'état du thème dans localStorage (clé : lh-ui-theme) ; le thème est conservé après un rafraîchissement de la page.

Approche 2 : bascule par attribut HTML

Placez data-theme="dark" sur l'élément racine pour activer globalement le mode sombre :

html

<!DOCTYPE html>
<html lang="fr-FR" data-theme="dark">
  <!-- ... -->
</html>

Couleurs de thème personnalisées (porcelaine bleue et blanche / vert pin / rouge vermillon)

Outre les thèmes clair et sombre intégrés, la bibliothèque de composants permet de personnaliser n'importe quelle combinaison de couleurs via themeVars, afin de réaliser un thème individualisé.

L'exemple ci-dessous est une démonstration de variables personnalisées écrites à la main, dont les valeurs ont été ajustées pour les besoins de l'explication et ne correspondent pas exactement aux préréglages intégrés de même nom dans les Thèmes prédéfinis (cerblue / songhua / zhusha). Pour utiliser directement un préréglage intégré, recourez à useLhPresetTheme ou getThemeVars(name).

Thème porcelaine bleue et blanche

Un fond de teinte indigo profond, inspiré de la porcelaine bleue et blanche traditionnelle.

Composition API

vue

<script setup lang="ts">
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-active': '#1F3A5F',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
  'border-color-base': '#C8D6E5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">Bouton porcelaine bleue</LhButton>
    <LhInput placeholder="Champ porcelaine bleue" />
  </LhConfigProvider>
</template>

Options API

vue

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

export default {
  components: { LhConfigProvider, LhButton, LhInput },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhButton type="primary">Bouton porcelaine bleue</LhButton>
  </LhConfigProvider>
</template>

Thème vert pin

Des touches de vert bambou pour un style frais et naturel.

vue

<script setup lang="ts">
const bambooTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#6FA36E',
  'primary-color-bg': '#EDF5EC',
  'success-color': '#5B8C5A',
  'bg-color': '#F6FAF5',
}
</script>

<template>
  <LhConfigProvider :theme-vars="bambooTheme">
    <LhButton type="primary">Sentier de bambous</LhButton>
    <LhTag type="success">Nouvelle feuille</LhTag>
  </LhConfigProvider>
</template>

Thème rouge vermillon

Une dominante de rouge vermillon, pastel de sceau, pour mettre en valeur une atmosphère d'élégance précieuse.

vue

<script setup lang="ts">
const vermilionTheme = {
  'primary-color': '#C43A31',
  'primary-color-hover': '#E85D4A',
  'primary-color-bg': '#FDF0EE',
  'bg-color': '#FFFBF9',
  'border-color-base': '#F0D5CF',
}
</script>

<template>
  <LhConfigProvider :theme-vars="vermilionTheme">
    <LhButton type="primary">Rouge vermillon</LhButton>
  </LhConfigProvider>
</template>

Système de fonds à motifs

La bibliothèque de composants fournit un système de fonds à motifs poétiques au style chinois, avec 6 motifs prédéfinis, que l'on peut combiner avec la liste blanche patternComponents pour en contrôler finement la portée.

Motifs prédéfinis

Motif	Variable CSS	Description
Feuille de saule	`var(--lh-pattern-willow)`	Feuilles de saule allongées, espacement régulier
Nuage de bon présage	`var(--lh-pattern-cloud)`	Nuages qui se déploient en ondulant
Onde d'eau	`var(--lh-pattern-water)`	De légers remous en couches successives
Flocon de neige	`var(--lh-pattern-snow)`	Flocons hexagonaux aux fines branches
Fleur de prunier	`var(--lh-pattern-plum)`	Cinq pétales ouverts, cœur bien marqué
Feuille de bambou	`var(--lh-pattern-bamboo)`	Feuilles de bambou lancéolées, disposées avec rythme

Configuration globale des motifs

Composition API

vue

<script setup lang="ts">
const config = {
  themeVars: {
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input'] as const,
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <!-- Le bouton et le champ appliquent le motif, pas la boîte de dialogue -->
    <LhButton>Bouton avec motif</LhButton>
    <LhInput placeholder="Champ avec motif" />
  </LhConfigProvider>
</template>

Options API

vue

<script>
export default {
  data() {
    return {
      config: {
        themeVars: {
          'bg-pattern': 'var(--lh-pattern-cloud)',
          'bg-pattern-opacity': '0.15',
        },
        patternComponents: ['button', 'input'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :theme-vars="config.themeVars"
    :pattern-components="config.patternComponents"
  >
    <LhButton>Bouton avec motif</LhButton>
  </LhConfigProvider>
</template>

Référence des variables de motif

Nom de la variable	Description	Valeur par défaut
`--lh-bg-pattern`	URL du fond à motifs	`none`
`--lh-bg-pattern-repeat`	Mode de répétition	`repeat`
`--lh-bg-pattern-size`	Taille du motif	`40px`
`--lh-bg-pattern-opacity`	Opacité du motif	`0.15`
`--lh-bg-pattern-color`	Couleur du motif	`var(--lh-decoration-color, rgba(184, 134, 11, 0.12))`
`--lh-bg-pattern-blend`	Mode de fusion	`soft-light`

Exemple de configuration complète

L'exemple suivant présente l'utilisation complète de la configuration de ConfigProvider, intégrant toutes les capacités : thème, langue, taille, motifs.

Composition API

vue

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

const configProvider = {
  size: 'medium' as const,
  locale: zhCN,
  themeVars: {
    'primary-color': '#2B4C7C',
    'bg-pattern': 'var(--lh-pattern-cloud)',
    'bg-pattern-opacity': '0.15',
  },
  patternComponents: ['button', 'input', 'dialog'],
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

Options API

vue

<script>
import { zhCN } from '@lh-ui/vue3'

export default {
  data() {
    return {
      configProvider: {
        size: 'medium',
        locale: zhCN,
        themeVars: {
          'primary-color': '#2B4C7C',
          'bg-pattern': 'var(--lh-pattern-cloud)',
        },
        patternComponents: ['button', 'input', 'dialog'],
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider
    :size="configProvider.size"
    :locale="configProvider.locale"
    :theme-vars="configProvider.themeVars"
    :pattern-components="configProvider.patternComponents"
  >
    <slot />
  </LhConfigProvider>
</template>

Priorité des variables de thème

Les variables CSS finales du composant sont fusionnées selon la priorité suivante (les suivantes couvrent les précédentes) :

themeVars global du ConfigProvider (priorité la plus basse)
componentTheme[nom du composant] par composant du ConfigProvider
Prop themeVars du composant lui-même
Prop bgPattern du composant lui-même (priorité la plus haute)

Pour la variable bg-pattern, la liste blanche patternComponents s'applique en outre : seuls les composants de la liste blanche appliquent le bg-pattern de la configuration globale.

Mise en page rapide sx

La propriété sx offre un moyen déclaratif de mise en page en ligne, permettant de régler l'espacement et la taille des composants sans écrire de CSS. Elle est actuellement prise en charge par les composants suivants : Button, Input, Dialog, Tooltip, Alert, Card, Empty, Breadcrumb, Pagination, Steps, Tabs, Skeleton.

Principe

sx repose sur une grille de référence de 8px : un nombre multiplié par 8 donne la valeur en pixels. Par exemple, mt: 2 équivaut à marginTop: 16px.

Propriétés prises en charge

Espacement

Prop	Description	Exemple	CSS équivalent
`m`	Marge externe des quatre côtés	`m: 2`	`margin: 16px`
`mx`	Marge externe horizontale	`mx: 1`	`marginLeft: 8px; marginRight: 8px`
`my`	Marge externe verticale	`my: 1`	`marginTop: 8px; marginBottom: 8px`
`mt`, `mr`, `mb`, `ml`	Marge externe d'un seul côté	`mt: 2`	`marginTop: 16px`
`p`	Marge interne des quatre côtés	`p: 3`	`padding: 24px`
`px`	Marge interne horizontale	`px: 2`	`paddingLeft: 16px; paddingRight: 16px`
`py`	Marge interne verticale	`py: 1`	`paddingTop: 8px; paddingBottom: 8px`
`pt`, `pr`, `pb`, `pl`	Marge interne d'un seul côté	`pt: 2`	`paddingTop: 16px`

Tailles

Prop	Description	Exemple
`w`	Largeur (un nombre correspond à des px, une chaîne à la valeur elle-même)	`w: 200` ou `w: '100%'`
`h`	Hauteur	`h: 100` ou `h: 'auto'`

Disposition Flex

Prop	Description	Exemple
`display`	Type d'affichage	`display: 'flex'`
`flex`	Raccourci flex	`flex: '1 1 0%'`
`flexDirection`	Direction de l'axe principal	`flexDirection: 'column'`
`alignItems`	Alignement sur l'axe transversal	`alignItems: 'center'`
`justifyContent`	Alignement sur l'axe principal	`justifyContent: 'flex-end'`

Exemple d'utilisation

vue

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <!-- Espacement du bouton -->
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Bouton avec espacement</LhButton>

  <!-- Marge externe du champ -->
  <LhInput placeholder="Espacement vertical du champ" :sx="{ my: 1 }" />

  <!-- Largeur de la boîte de dialogue : sx ne prend en charge que w/h et les propriétés d'espacement -->
  <LhDialog v-model="visible" title="Exemple" :sx="{ w: 480 }">
    <p>Boîte de dialogue à largeur fixe</p>
  </LhDialog>
</template>

vue

<script>
export default {
  data() {
    return { visible: false }
  },
}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Bouton avec espacement</LhButton>
</template>

Personnalisation du thème ​

Système de couleurs au style chinois ​

Système de thèmes à variables CSS ​

Variables de couleur ​

Variables de texte ​

Variables de bordure ​

Variables de fond ​

Variables d'ombre ​

Variables de police ​

Variables d'espacement ​

Variables de z-index ​

Variables de transition ​

Thème sombre ​

Approche 1 : utiliser la fonction composable useLhTheme ​

Composition API ​

Options API ​

Approche 2 : bascule par attribut HTML ​

Couleurs de thème personnalisées (porcelaine bleue et blanche / vert pin / rouge vermillon) ​

Thème porcelaine bleue et blanche ​

Composition API ​

Options API ​

Thème vert pin ​

Thème rouge vermillon ​

Système de fonds à motifs ​

Motifs prédéfinis ​

Configuration globale des motifs ​

Composition API ​

Options API ​

Référence des variables de motif ​

Exemple de configuration complète ​

Composition API ​

Options API ​

Priorité des variables de thème ​

Mise en page rapide sx ​

Principe ​

Propriétés prises en charge ​

Espacement ​

Tailles ​

Disposition Flex ​

Exemple d'utilisation ​

Personnalisation du thème

Système de couleurs au style chinois

Système de thèmes à variables CSS

Variables de couleur

Variables de texte

Variables de bordure

Variables de fond

Variables d'ombre

Variables de police

Variables d'espacement

Variables de z-index

Variables de transition

Thème sombre

Approche 1 : utiliser la fonction composable `useLhTheme`

Composition API

Options API

Approche 2 : bascule par attribut HTML

Couleurs de thème personnalisées (porcelaine bleue et blanche / vert pin / rouge vermillon)

Thème porcelaine bleue et blanche

Composition API

Options API

Thème vert pin

Thème rouge vermillon

Système de fonds à motifs

Motifs prédéfinis

Configuration globale des motifs

Composition API

Options API

Référence des variables de motif

Exemple de configuration complète

Composition API

Options API

Priorité des variables de thème

Mise en page rapide sx

Principe

Propriétés prises en charge

Espacement

Tailles

Disposition Flex

Exemple d'utilisation