Theme Studio

Not satisfied with the built-in presets? Pick one as a starting point in the studio below, tune the tokens one by one, watch the preview update live, then export a single SCSS file into your project — no recompilation of the library required.

预设青花瓷（cerblue） 松花绿（songhua） 朱砂（zhusha） 水墨（shuimo） 藤黄（golden） 自定义

主色

--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; }

Adopting the exported theme

The exported file looks like this (tokens originate from @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);
}

Two ways to adopt it:

Option 1: static import (recommended) — drop the exported lh-theme.scss into your project and import it at the entry:

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

@use '@lh-ui/share/styles/index.scss' already bundles every component style and the theme tokens in one line; the dark block shares the same mechanism as the share presets, so data-theme="dark" switches automatically.

Option 2: runtime injection — override locally via the themeVars prop of LhConfigProvider (keys are shorthand, the --lh- prefix is added automatically). Handy when several themes coexist on one page:

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

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

Example code always uses npm package names (@lh-ui/vue3 / @lh-ui/share) so it is copy-paste ready; this docs site itself runs off the family-local source, so changes show up instantly.

Caveats

• Light primaries must declare --lh-color-on-primary explicitly: white text fails the AA contrast threshold (4.5:1) on light primaries, which is why the pine-green and golden presets switch to dark text. The "Text on primary" field in the studio covers this token.
• Leaving --lh-selected-color empty follows the default chain to --lh-primary-color-active; on light primaries it usually needs a dedicated darkening for selected text (the presets show this too).
• Contrast gate: share's pnpm verify:theme recomputes AA contrast for every preset against the real consumption pairs — review your custom theme the same way (see Theme Presets).