Saltar al contenido principal

Estudio de temas

El Estudio de temas es una herramienta interactiva: eliges un preset, modificas el color token a token, obtienes una vista previa en tiempo real y, por último, exportas un archivo SCSS listo para usar.

主色
主色
悬停
按压
主色底
主色边框
主色衍生
主色底文字
选中态文字
功能色
成功
警告
危险
信息
文本
主要文字
常规文字
次要文字
背景
容器背景
页面背景
边框
基础边框
浅边框
Vista previa en vivo
Etiqueta principalEtiqueta de éxitoEtiqueta de peligro

Texto principal·Texto normal·Texto secundario

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

Exportar SCSS

Cómo usarlo​

  1. Elegir un preset: el desplegable superior conmuta entre las cinco paletas incorporadas (青花瓷 (porcelana azul y blanco) / 松花绿 (verde pino) / 朱砂 (cinabrio) / 水墨 (tinta china) / 藤黄 (amarillo herbáceo)); un preset solo sobrescribe los tokens que declara, y el resto conserva el valor actual.
  2. Modificar tokens: cada grupo de tokens tiene un selector de color y un campo de texto hex, ambos sincronizados. Los tokens opcionales marcados como «sigue la cadena por defecto» (p. ej. --lh-selected-color), si se dejan vacíos, mantienen la relación de derivación por defecto de la hoja de estilos.
  3. Vista previa: el área de previsualización renderiza componentes reales de lh-ui; los tokens se inyectan mediante variables CSS locales (el mismo mecanismo que LhConfigProvider) y solo afectan al propio área de previsualización, no al sitio. Alternando claro / oscuro puedes ver el resultado de la adaptación al modo oscuro.
  4. Exportar: el texto SCSS obtenido, al copiarlo o descargarlo, contiene ya el bloque de tokens de :root y el bloque de modo oscuro [data-theme='dark']; la lógica del modo oscuro procede de la misma fuente que el mecanismo de presets de share (un preset con un color principal claro lo aclara automáticamente en modo oscuro, pues de lo contrario el botón se confundiría con el fondo).

Estructura del texto exportado​

/* Tema personalizado de lh-ui — generado por el Estudio de temas (2026-01-01) */
@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);
  /* ... */
}
  • @use introduce la línea base completa de tokens; el bloque :root solo sobrescribe los tokens modificados.
  • El bloque oscuro lo deriva buildPresetDarkVars, y es exactamente el que se ve en el área de previsualización.

Advertencias​

Solo se puede escribir en un elemento <style>

Al aplicar las variables del preset hay que escribir un elemento <style> (especificidad 0,1,0); no escribas el estilo en línea de documentElement: la especificidad en línea, 1,0,0,0, es mayor que la de cualquier hoja de estilos y prevalecería sobre todo el bloque de variables oscuras de var-dark.scss, lo que falsearía la paleta del modo oscuro. El useLhPresetTheme de la biblioteca y el script anti-parpadeo de este sitio respetan esta convención.

Contraste del color principal claro

Los presets con un color principal claro (p. ej. 松花绿 (verde pino)) necesitan declarar explícitamente --lh-color-on-primary (el texto sobre el color principal pasa a tinta) y --lh-selected-color (el texto del estado seleccionado se oscurece por separado); de lo contrario, el texto blanco sobre un color principal claro no alcanza el contraste AA. Los presets incorporados ya lo tienen en cuenta; al personalizar, debes comprobarlo tú mismo.

Relación con la versión Vue

La herramienta de esta página está portada del ThemeStudio de lh-ui-plus: los valores por defecto de los tokens, la agrupación y la lógica de derivación del modo oscuro son exactamente los mismos, y el SCSS exportado sirve para ambas bibliotecas (los tokens están definidos en la capa compartida @lh-ui/share/styles/theme/common/var.scss).