# Estudio de temas

¿No te conformas con los presets? En el estudio siguiente elige un preset como punto de partida, ajusta token a token tu propia paleta, la zona de previsualización se actualiza en tiempo real y, por último, exporta un archivo scss para colocar directamente en el proyecto: no hace falta recompilar la biblioteca de componentes.

Color principal

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

Derivados del principal

--lh-color-on-primary

--lh-selected-color

Colores funcionales

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

Texto

--lh-text-primary

--lh-text-regular

--lh-text-secondary

Fondo

--lh-bg-color

--lh-bg-color-page

Borde

--lh-border-color-base

--lh-border-color-light

Vista previa en vivo

标签标签标签

主要文字·常规文字·次要文字

Los tokens que editas solo se aplican al área de vista previa (mismo mecanismo que ConfigProvider). El archivo exportado también funciona en modo oscuro.

Exportar SCSS

# Adoptar el tema exportado

El archivo exportado por el estudio tiene este aspecto (el origen de los tokens está en @lh-ui/share/styles/theme/common/var.scss):

@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  /* ... */
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
}

Dos formas de adoptarlo:

Método 1: importación estática (recomendada): coloca el lh-theme.scss exportado en el proyecto e impórtalo en el punto de entrada:

// main.js
import './lh-theme.scss'

Con @use '@lh-ui/share/styles/index.scss' se incluyen todos los estilos de los componentes y los tokens del tema en una sola línea; el bloque oscuro comparte origen con el mecanismo de presets de share y se activa automáticamente con data-theme="dark".

Método 2: inyección en tiempo de ejecución: usa la propiedad themeVars de LhConfigProvider para una sobrescritura local (las claves van en notación abreviada y reciben el prefijo --lh- automáticamente), ideal para tener varios temas en la misma página:

<template>
  <LhConfigProvider :theme-vars="{ primaryColor: '#2B4C7C', onPrimary: '#FFFFFF' }">
    <LhButton type="primary">Botón principal</LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

El código de los ejemplos usa los nombres de paquete de npm (@lh-ui/vue2 / @lh-ui/share), listo para copiar; la ejecución real de este sitio documental utiliza el código fuente local de la familia, de modo que los cambios son visibles al instante.

# Precauciones

Con un color principal claro debe declararse --lh-color-on-primary de forma explícita: el texto blanco sobre un color principal claro no alcanza el contraste AA (4.5:1), por lo que los presets de 松花绿 (verde pino) y 藤黄 (amarillo herbáceo) usan texto tinta precisamente por eso. El campo «Texto sobre el color principal» del estudio corresponde a este token.
Cuando --lh-selected-color está vacío, sigue la cadena predeterminada de --lh-primary-color-active; con un color principal claro, el texto seleccionado suele necesitar un oscurecimiento aparte (los presets también lo reflejan).
Gate de contraste: pnpm verify:theme de share recalcula el contraste AA de cada preset con los emparejamientos de consumo reales; se recomienda revisar el tema personalizado siguiendo las indicaciones de Temas.

← Temas