Temas predefinidos

@lh-ui/share incorpora cinco paletas predefinidas de estilo chino, que @lh-ui/react consume tal cual. Los presets modifican las variables de color --lh-* y son ortogonales respecto al modo claro / oscuro (useLhTheme).

Lista de presets

Nombre	Descripción
cerblue	青花瓷 (porcelana azul y blanco) (predeterminado)
songhua	松花绿 (verde pino)
zhusha	朱砂 (cinabrio)
shuimo	水墨 (tinta china)
golden	鎏金 (dorado)

Conmutación en tiempo de ejecución

Usa useLhPresetTheme para conmutar. Las variables del preset se escriben en un <style id="lh-preset-theme"> (a nivel de :root) con efecto global:

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

Valores de retorno:

Campo	Tipo	Descripción
preset	ThemePresetName	Nombre del preset actual
setPreset	(name) => void	Conmuta de preset (escribe en localStorage de forma síncrona)
presets	ThemePreset[]	La lista completa de presets
themeVars	Record<string, string>	Variables compatibles con ConfigProvider del preset actual (a las claves ya se les ha quitado el prefijo --lh-)

Uso combinado con ConfigProvider

El valor de retorno themeVars se puede pasar directamente a LhConfigProvider para que el preset solo afecte a un subárbol y no a todo el sitio:

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

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

Anti-parpadeo (FOUC)

Este sitio serializa en tiempo de compilación el mapeo «nombre de preset → texto de estilos» en un script síncrono dentro del head del HTML, que aplica el preset recordado en localStorage antes del primer pintado, para evitar que, al refrescar, se vea primero el color por defecto y luego se conmute. La configuración está en PRESET_FOUC_SCRIPT de docs/docusaurus.config.ts.

No se puede usar el estilo en línea

Las variables del preset solo se pueden escribir en un elemento <style>, no en document.documentElement.style: la especificidad del estilo en línea, 1,0,0,0, prevalece siempre sobre la hoja de estilos, de modo que al conmutar de preset en tiempo de ejecución la página seguiría leyendo el valor en línea anterior, y además prevalecería sobre todo el bloque de variables oscuras de var-dark.scss.