Personalización de temas

Todos los tokens de diseño de @lh-ui/react provienen de @lh-ui/share/theme; esta biblioteca no mantiene ninguna copia de los tokens. Personalizar el tema consiste en sobrescribir estas custom properties de CSS.

Jerarquía de tokens

La prioridad de los estilos, de menor a mayor:

1. theme.css — tokens básicos que publica @lh-ui/share (--lh-primary-color, etc.)
2. theme-dark.css — variables del modo oscuro (mutuamente excluyentes con theme.css; uno de los dos)
3. themeVars de LhConfigProvider — variables en cascada colgadas del elemento envolvente
4. prop themeVars del componente — colgada del elemento raíz del componente, prevalece sobre cualquier nivel superior

Personalización con ConfigProvider

La forma más recomendada: pasa themeVars en la raíz de la aplicación; los nombres de las claves no llevan el prefijo --lh- (se añade automáticamente de forma interna):

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

export default function App() {
  return (
    <LhConfigProvider
      themeVars={{
        'primary-color': '#722ed1',
        'bg-color': '#faf9f7',
        'border-radius-base': '6px',
      }}
    >
      <YourApp />
    </LhConfigProvider>
  )
}

Las variables se renderizan en el elemento envolvente como style="--lh-primary-color: #722ed1; ..." y caen en cascada hacia abajo.

Tokens disponibles

Clave	Descripción
primary-color	Color principal
gold-color / vermilion-color / jade-color	Colores exclusivos del estilo chino (dorado / cinabrio / jade)
bg-color / text-color / border-color	Colores neutros
bg-pattern	URL del patrón de fondo (p. ej. var(--lh-pattern-willow))
bg-pattern-opacity / bg-pattern-color	Opacidad y color del patrón
decoration-color	Color de decoración

Personalización de un componente

Todos los componentes que soportan tema admiten directamente themeVars, que solo afecta al propio componente:

<LhButton themeVars={{ 'primary-color': '#13c2c2' }}>Botón turquesa</LhButton>

También puedes usar componentTheme para configurar varios componentes a la vez por nombre (los nombres de las claves son comunes a toda la familia):

<LhConfigProvider
  componentTheme={{
    button: { 'primary-color': '#722ed1' },
    input: { 'border-color': '#d9d9d9' },
  }}
>
  <YourApp />
</LhConfigProvider>

Prioridad: props del propio componente > componentTheme[nombre del componente] > themeVars global.

Patrón de fondo

El patrón de fondo de estilo chino está desactivado por defecto. Se activa mediante la lista blanca patternComponents: solo los componentes de la lista aplican el patrón global:

<LhConfigProvider
  themeVars={{ 'bg-pattern': 'var(--lh-pattern-willow)' }}
  patternComponents={['dialog', 'card']}
>
  <YourApp />
</LhConfigProvider>

El patrón que un componente recibe por su propia prop bgPattern no está sujeto a la lista blanca.

sx: diseño rápido

Algunos componentes soportan la prop sx, que permite escribir los estilos de diseño más habituales como un objeto (la semántica es la misma que la sx de emotion / MUI):

<LhButton sx={{ marginTop: 2, width: '100%' }} block>
  Botón a todo el ancho
</LhButton>

Conmutación en tiempo de ejecución

Cambiar de tema consiste, en el fondo, en modificar variables de CSS, de modo que puede ser completamente dinámico:

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

function App() {
  const [primary, setPrimary] = useState('#1677ff')
  return (
    <LhConfigProvider themeVars={{ 'primary-color': primary }}>
      <input type="color" onChange={(e) => setPrimary(e.target.value)} />
      <YourApp />
    </LhConfigProvider>
  )
}

Aserción de tipos de las variables CSS

En el código fuente, style="{ { '--lh-primary-color': x } }" da error con TypeScript (CSSProperties no admite claves de custom properties). Esta biblioteca usa la utilidad cssVarsStyle() para tratar de forma uniforme la conversión de nombres de claves y la aserción; ya está encapsulada dentro de los componentes, de modo que en la capa de usuario no hay que preocuparse.