Temas predefinidos

lh-ui-plus incorpora 5 temas predefinidos de estilo chino, listos para usar. Hay dos formas de utilizarlos:

• Cambio global (recomendado): useLhPresetTheme escribe las variables del preset en :root, se aplica a todo el sitio y se persiste en localStorage.
• Cambio local: LhConfigProvider :theme-vars solo afecta a su subárbol; resulta práctico para mostrar varios temas en paralelo dentro de una misma página.

Las variables de los presets se pueden obtener mediante getThemeVars(name) (de @lh-ui/vue3/theme); los valores posibles de name se indican en cada una de las secciones siguientes.

Cambio de tema del sitio

Este sitio ofrece un menú desplegable de «Presets de tema» en la barra de navegación superior, que permite cambiar con un clic entre los 5 temas de estilo chino. La elección se persiste en localStorage['lh-docs-preset'] y se mantiene tras actualizar la página.

Los presets de tema y el modo claro/oscuro son dos ejes independientes: el botón 🌙/☀️ en la parte derecha de la barra de navegación de VitePress conmuta entre modo claro y oscuro, mientras que el menú desplegable «Presets de tema» cambia la paleta (青花瓷, 朱砂, 松花绿, etc.). En el modo oscuro, los presets también se aplican y se manifiestan como temas oscuros con distintas tonalidades.

Propiedades de tema universales themeVars y bgPattern

Todos los componentes de lh-ui-plus admiten la sobreescritura local del tema a través de LhConfigProvider o de la propiedad themeVars del propio componente; el fondo con patrón se controla de forma uniforme mediante la propiedad bgPattern (los patrones provienen de la lista blanca patternComponents de ConfigProvider). Al tratarse de dos capacidades universales transversales a los componentes, no se ejemplifican una a una en la documentación de cada componente, sino que se explican de forma centralizada en Personalización de temas y Sistema de fondos con patrones.

青花瓷 (porcelana azul y blanco) (predeterminado)

El tema predeterminado, inspirado en el esmalte bajo cubierta de la porcelana azul y blanco, de tonos puros y elegantes. Nombre del preset: cerblue.

Tema porcelana azul y blanco

Etiqueta

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

// Las claves devueltas por getThemeVars ya llevan el prefijo --lh-; el procesamiento del prefijo de ConfigProvider es idempotente, se pueden pasar directamente
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhButton type="success">Éxito</LhButton>
      <LhButton type="warning">Advertencia</LhButton>
      <LhButton type="danger">Peligro</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

松花绿 (verde pino)

Bosque de bambúes exuberantes, lleno de vitalidad. Nombre del preset: songhua.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const songhuaTheme = getThemeVars('songhua')
</script>

<template>
  <LhConfigProvider :theme-vars="songhuaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

朱砂 (cinabrio)

El rojo cinabrio de los sellos tradicionales, solemne y festivo. Nombre del preset: zhusha.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const zhushaTheme = getThemeVars('zhusha')
</script>

<template>
  <LhConfigProvider :theme-vars="zhushaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

水墨 (tinta china)

Pintura a tinta china, sobria y minimalista. Nombre del preset: shuimo.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const shuimoTheme = getThemeVars('shuimo')
</script>

<template>
  <LhConfigProvider :theme-vars="shuimoTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

藤黄 (amarillo herbáceo)

El dorado del arce en pleno otoño, cálido y amarillento. Nombre del preset: golden.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const goldenTheme = getThemeVars('golden')
</script>

<template>
  <LhConfigProvider :theme-vars="goldenTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Comparación de temas

Tema	Preset	Color principal --lh-primary-color	Fondo del color principal --lh-primary-color-bg	Descripción
青花瓷 (porcelana azul y blanco)	cerblue	#2B4C7C	#E8EDF3	Esmalte bajo cubierta de la porcelana azul y blanco, puro y elegante
松花绿 (verde pino)	songhua	#5B8C5A	#E8F5E8	Bosque de bambúes exuberantes, lleno de vitalidad
朱砂 (cinabrio)	zhusha	#B23A3A	#FDF0F0	Rojo cinabrio de los sellos tradicionales, solemne y festivo
水墨 (tinta china)	shuimo	#2C2C2C	#F5F5F5	Pintura a tinta china, sobria y minimalista
藤黄 (amarillo herbáceo)	golden	#B8860B	#FBF6EA	Dorado del arce en pleno otoño, cálido y amarillento

Los presets solo sobrescriben la paleta del color principal (primary); --lh-primary-color-bg es el color de fondo clarificado del color principal, no el color de fondo de toda la página.

Conmutación programática

Existen dos mecanismos, según el ámbito deseado:

• Cambio global (recomendado): useLhPresetTheme escribe las variables del preset en :root, se aplica a todo el sitio, se persiste en localStorage y mantiene la elección tras actualizar la página. No requiere envolver nada con LhConfigProvider.
• Cambio local: LhConfigProvider :theme-vars solo afecta a su subárbol; resulta práctico para mostrar varios temas en paralelo dentro de una misma página.

Conmutación global de presets

El siguiente grupo de botones de conmutación escribe en :root, de modo que todo el sitio de documentación se ve afectado; esta es la razón por la que esta página ya no incluye una demostración independiente del cambio global.

<script setup lang="ts">
import { LhButton, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets } = useLhPresetTheme()
</script>

<template>
  <LhButton
    v-for="theme in presets"
    :key="theme.name"
    :type="preset === theme.name ? 'primary' : 'default'"
    @click="setPreset(theme.name)"
  >
    {{ theme.label }}
  </LhButton>
</template>

Conmutación de ámbito local

Si se pasa applyToRoot: false, se desactiva la escritura global y solo se obtienen los themeVars devueltos (ya sin el prefijo --lh-, según la convención de ConfigProvider), de modo que es el Provider quien delimita el ámbito.

El botón de conmutación debe colocarse fuera de LhConfigProvider; de lo contrario, el propio botón también vería alterados sus colores:

Conmutación local de preset de tema

Etiqueta

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme({ applyToRoot: false })
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px">
    <LhButton
      v-for="theme in presets"
      :key="theme.name"
      :type="preset === theme.name ? 'primary' : 'default'"
      @click="setPreset(theme.name)"
    >
      {{ theme.label }}
    </LhButton>
  </div>
  <LhConfigProvider :theme-vars="themeVars">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">Botón principal</LhButton>
      <LhButton type="success">Éxito</LhButton>
      <LhButton type="warning">Advertencia</LhButton>
      <LhButton type="danger">Peligro</LhButton>
      <LhTag type="primary">Etiqueta</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

Forma de escribir el prefijo: el procesamiento del prefijo de ConfigProvider es idempotente. Las claves devueltas por getThemeVars() (de @lh-ui/vue3/theme) ya llevan el prefijo --lh- y se pueden pasar directamente a :theme-vars; en cambio, los themeVars devueltos por useLhPresetTheme() ya vienen sin prefijo. Ambos se pueden usar directamente en :theme-vars, sin necesidad de un segundo procesamiento.