Estudio de temas

¿No te basta con los presets? En el estudio siguiente puedes elegir un preset como punto de partida, ajustar la paleta token a token y ver la zona de vista previa actualizarse en tiempo real, para finalmente exportar un archivo scss que se puede colocar directamente en el proyecto, sin necesidad de recompilar la biblioteca de componentes.

主色

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

主色衍生

--lh-color-on-primary

--lh-selected-color

功能色

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

文本

--lh-text-primary

--lh-text-regular

--lh-text-secondary

背景

--lh-bg-color

--lh-bg-color-page

边框

--lh-border-color-base

--lh-border-color-light

实时预览

标签标签标签

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

编辑的令牌只作用于预览区（与 ConfigProvider 同机制）；导出的文件已包含暗色适配。

导出 SCSS

/* lh-ui 自定义主题 —— 由主题定制台生成（2026-10-15）
 * 令牌定义见 @lh-ui/share/styles/theme/common/var.scss；暗色块与预设机制同源
 *（浅主色下 --lh-color-on-primary / --lh-selected-color 需显式声明，否则白字不达 AA） */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  --lh-primary-color-hover: #3D649E;
  --lh-primary-color-active: #1F3A5F;
  --lh-primary-color-bg: #E8EDF3;
  --lh-primary-color-border: #D4DCE8;
  --lh-color-on-primary: #FFFFFF;
  --lh-success-color: #5B8C5A;
  --lh-warning-color: #C4A35A;
  --lh-danger-color: #B23A3A;
  --lh-info-color: #7A7A7A;
  --lh-text-primary: #2C2C2C;
  --lh-text-regular: #5A5A5A;
  --lh-text-secondary: #8A8A8A;
  --lh-bg-color: #FAF6F0;
  --lh-bg-color-page: #F5F0EB;
  --lh-border-color-base: #D8D3CC;
  --lh-border-color-light: #E5E0D8;
}

[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);
  --lh-primary-color: color-mix(in srgb, #2B4C7C 55%, #fff);
  --lh-primary-color-hover: color-mix(in srgb, var(--lh-primary-color) 70%, #fff);
  --lh-primary-color-active: color-mix(in srgb, var(--lh-primary-color) 85%, #000);
  --lh-color-on-primary: #101410;
}

Adoptar el tema exportado

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

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:

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

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

@use '@lh-ui/share/styles/index.scss' ya incluye todos los estilos de los componentes y los tokens del tema, con una sola línea es suficiente; el bloque del modo oscuro comparte el mismo origen que el mecanismo de presets de share, de modo que se conmuta automáticamente con data-theme="dark".

Forma dos: inyección en tiempo de ejecución: utiliza la sobreescritura local de themeVars de LhConfigProvider (las claves son abreviadas y reciben automáticamente el prefijo --lh-), práctica cuando se muestran varios temas en paralelo en una misma página:

vue

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

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

El código de ejemplo utiliza de forma uniforme los nombres de paquete npm (@lh-ui/vue3 / @lh-ui/share), listo para copiar y usar; el sitio de documentación, en cambio, se ejecuta sobre el código fuente local de la familia, por lo que los cambios son visibles de inmediato.

Consideraciones

Los colores principales claros deben declarar --lh-color-on-primary explícitamente: el texto blanco sobre un color principal claro no alcanza el contraste AA (4.5:1); por ello, en los presets 松花绿 / 藤黄 se ha cambiado a texto de color tinta. El campo «Texto sobre el color principal» del estudio corresponde a este token.
Cuando --lh-selected-color se deja vacío, sigue la cadena predeterminada de --lh-primary-color-active; con un color principal claro, el texto seleccionado suele necesitar una oscurecimiento independiente (los presets también lo reflejan).
Control de contraste: pnpm verify:theme de share recalcula el contraste AA de cada preset según los pares de consumo reales; para un tema personalizado se recomienda revisarlo a mano siguiendo los comentarios de Temas predefinidos.

Estudio de temas ​

Adoptar el tema exportado ​

Consideraciones ​

Estudio de temas

Adoptar el tema exportado

Consideraciones