Thèmes

Le système de thème de la famille lh-ui est défini dans @lh-ui/share (source unique) ; la bibliothèque Vue2 le consomme sous forme de variables CSS.

Variables CSS

Tous les jetons sont nommés --lh-* et injectés dans :root par @lh-ui/vue2/theme.css :

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* La liste complète se trouve dans la source theme du dépôt share */
}

Mode sombre

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

<html data-theme="dark">

La forme par classe .dark est également prise en charge. Les variables cascadent depuis ConfigProvider ou :root ; les composants ne les redéclarent pas.

Personnalisation locale avec ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">Bouton vert bambou</LhButton>
  </LhConfigProvider>
</template>

Priorité : themeVars du composant lui-même > componentTheme[nom du composant] > themeVars globale ; le motif bg-pattern est en outre soumis à la liste blanche patternComponents.

Thèmes prédéfinis et bascule entre préréglages

@lh-ui/vue2/theme retransmet les préréglages TypeScript de share (青花瓷 (porcelaine bleue et blanche), 松花绿 (vert pin), etc.), à utiliser avec useLhPresetTheme :

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

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // Écrit dans :root ; themeVars peut également être confié à ConfigProvider pour une portée locale

useLhTheme prend en charge la bascule clair / sombre (data-theme + persistance dans localStorage).