Thèmes prédéfinis

@lh-ui/share intègre cinq palettes préréglées de style chinois, que @lh-ui/react consomme telles quelles. Les préréglages modifient les variables de couleur --lh-* et sont orthogonaux au mode clair / sombre (useLhTheme).

Liste des préréglages

Nom	Description
cerblue	青蓝 (bleu azur, par défaut)
songhua	松花 (vert pin)
zhusha	朱砂 (cinabre)
shuimo	水墨 (encre de Chine)
golden	鎏金 (or brillant)

Bascule à l'exécution

Utiliser useLhPresetTheme pour changer de préréglage. Les variables du préréglage sont écrites dans un <style id="lh-preset-theme"> (au niveau :root), avec une portée globale :

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

function PresetSwitcher() {
  const { preset, setPreset, presets } = useLhPresetTheme()

  return (
    <select value={preset} onChange={(e) => setPreset(e.target.value as never)}>
      {presets.map((p) => (
        <option key={p.name} value={p.name}>
          {p.name}
        </option>
      ))}
    </select>
  )
}

Valeurs de retour :

Champ	Type	Description
preset	ThemePresetName	Nom du préréglage courant
setPreset	(name) => void	Change de préréglage (écriture synchrone dans localStorage)
presets	ThemePreset[]	Liste complète des préréglages
themeVars	Record<string, string>	Variables compatibles ConfigProvider du préréglage courant (clés sans le préfixe --lh-)

Utilisation conjointe avec ConfigProvider

La valeur de retour themeVars peut être fournie directement à LhConfigProvider, afin que le préréglage n'agisse que sur un sous-arbre plutôt que sur l'ensemble de la page :

import { LhConfigProvider, useLhPresetTheme } from '@lh-ui/react'

function App() {
  const { themeVars } = useLhPresetTheme({ initialPreset: 'zhusha' })
  return (
    <LhConfigProvider themeVars={themeVars}>
      <YourApp />
    </LhConfigProvider>
  )
}

Anti-scintillement

À la construction du site, la correspondance « nom de préréglage → texte de style » est sérialisée dans un script synchrone de l'en-tête HTML ; celui-ci applique le préréglage mémorisé dans localStorage avant le premier rendu, afin d'éviter un flash des couleurs par défaut au moment du rafraîchissement. La configuration se trouve dans le PRESET_FOUC_SCRIPT de docs/docusaurus.config.ts.

Pas de style en ligne

Les variables du préréglage doivent être écrites dans un élément <style>, jamais dans document.documentElement.style : un style en ligne a une spécificité de 1,0,0,0 qui surpasse toujours les feuilles de style — la page continuerait de lire les valeurs en ligne obsolètes lors d'un changement de préréglage à l'exécution, et cela écraserait tout le bloc de variables sombres de var-dark.scss.