Theme Studio

Theme Studio is an interactive tool: pick a preset, edit tokens one by one, preview live, and finally export a ready-to-use SCSS file.

Preset

Primary

Hover

Active

Primary bg

Primary border

Primary-derived

Text on primary

Selected text

Functional

Success

Warning

Danger

Info

Text

Primary text

Regular text

Secondary text

Background

Container bg

Page bg

Border

Base border

Light border

Live preview

Primary tagSuccess tagDanger tag

checked

Primary text·Regular text·Secondary text

Tokens you edit apply to the preview area only (same mechanism as ConfigProvider). The exported file also works in dark mode.

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

How to use

Pick a preset: the top dropdown switches between the five built-in palettes (Ceramic Blue / Pine Green / Vermilion / Ink Wash / Golden Autumn). A preset only overrides the tokens it declares; the rest keep their current values.
Edit tokens: every token has both a color picker and a hex text field, kept in sync. Optional tokens marked "follows default chain" (such as --lh-selected-color) can be left empty to keep the stylesheet's default derivation.
Preview: the preview area renders real lh-ui components. Tokens are injected as local CSS variables (the same mechanism as LhConfigProvider), scoped to the preview area only, without affecting the site. Toggle light / dark to check the dark adaptation.
Export: the SCSS text you copy or download already contains the :root token block and the [data-theme='dark'] dark block. The dark logic is fully isomorphic with share's preset mechanism (a deep-primary preset is automatically lightened in dark mode, otherwise the buttons would blend into the background).

Structure of the exported text

/* lh-ui custom theme — generated by Theme Studio (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 pulls in the full token baseline; the :root block only overrides the tokens you changed.
The dark block is derived by buildPresetDarkVars, exactly matching what the preview area shows.

Notes

Only write to a <style> element

When applying preset variables you must write to a <style> element (specificity 0,1,0) — never to documentElement's inline style. Inline specificity is 1,0,0,0, higher than any stylesheet, and it would override the entire var-dark.scss dark variable block, distorting the dark-mode palette. Both the library's useLhPresetTheme and this site's anti-flicker script follow this rule.

Contrast of light primaries

A light-primary preset (such as Pine Green) needs explicit --lh-color-on-primary (ink text on the primary color) and --lh-selected-color (a deeper color for selected text); otherwise white text on a light primary falls short of AA contrast. The built-in presets handle this; check it yourself when customizing.

Relationship to the Vue version

This tool is ported from lh-ui-plus's ThemeStudio. Token defaults, groups, and dark-derivation logic are all identical, and the exported SCSS works with both libraries (the tokens are defined in the shared layer @lh-ui/share/styles/theme/common/var.scss).

How to use​

Structure of the exported text​

Notes​

How to use

Structure of the exported text

Notes