Temas

El sistema de temas de la familia lh-ui se define en @lh-ui/share (origen único) y la biblioteca Vue2 lo consume mediante variables CSS.

Variables CSS

Todos los tokens se nombran --lh-* y se inyectan en :root mediante @lh-ui/vue2/theme.css:

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* La lista completa está en el código fuente de theme del repositorio share */
}

Modo oscuro

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

<html data-theme="dark">

También se admite la forma de clase .dark. Las variables se heredan en cascada desde ConfigProvider o desde :root; los componentes no las declaran de nuevo.

Personalización local con ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">Botón verde bambú</LhButton>
  </LhConfigProvider>
</template>

Prioridad: themeVars del propio componente > componentTheme[nombre del componente] > themeVars global; el patrón bg-pattern está además controlado por la lista blanca patternComponents.

Presets y conmutación de presets

@lh-ui/vue2/theme reenvía los presets de TS de share (青花瓷 (porcelana azul y blanco), 松花绿 (verde pino), etc.) e incluye useLhPresetTheme:

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

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // Escribe en :root; themeVars también puede delegarse a ConfigProvider para un alcance local

useLhTheme gestiona la conmutación entre claro y oscuro (data-theme + persistencia en localStorage).