主題客製台

主題客製台是一個互動式工具：選預設、逐令牌改色、即時預覽，最後匯出一份可直接用的 SCSS 檔案。

預設

主色

悬停

按压

主色底

主色边框

主色衍生

主色底文字

选中态文字

功能色

成功

警告

危险

信息

文本

主要文字

常规文字

次要文字

背景

容器背景

页面背景

边框

基础边框

浅边框

即時預覽

主要標籤成功標籤危險標籤

已選

主要文字·常規文字·次要文字

編輯的令牌只作用於預覽區（與 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;
}

使用方法

選預設：頂部下拉框切換五套內建色板（青花瓷 / 松花綠 / 朱砂 / 水墨 / 藤黃），預設只覆蓋它宣告的令牌，其餘保持當前值。
改令牌：每組令牌都有取色器與 hex 文字框，兩者同步。標「跟隨預設鏈路」的可選令牌（如 --lh-selected-color）留空即沿用樣式表的預設衍生關係。
預覽：預覽區用真實的 lh-ui 元件渲染，令牌透過局部 CSS 變數注入（與 LhConfigProvider 同機制），只作用於預覽區本身，不影響站台。切換明 / 暗可查看暗色適配效果。
匯出：複製或下載得到的 SCSS 文字已包含 :root 令牌塊與 [data-theme='dark'] 暗色塊，暗色邏輯與 share 的預設機制完全同源（深主色預設在暗色下會自動提亮主色，否則按鈕與背景融為一體）。

匯出文字的結構

/* lh-ui 自訂主題 —— 由主題客製台生成（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 引入全量令牌基線，:root 塊只覆蓋改動過的令牌。
暗色塊由 buildPresetDarkVars 推導，與預覽區看到的完全一致。

注意事項

只能寫 <style> 元素

套用預設變數時必須寫 <style> 元素（特異性 0,1,0），不要寫 documentElement 的行內 style——行內特異性 1,0,0,0 高於一切樣式表，會壓過 var-dark.scss 的整段暗色變數，導致暗色模式配色失真。庫內的 useLhPresetTheme 與本站的防閃爍腳本都遵守此約定。

淺主色的對比度

淺主色預設（如松花綠）需要顯式宣告 --lh-color-on-primary（主色底改用墨字）與 --lh-selected-color（選取態文字單獨加深），否則白字在淺主色上不達 AA 對比度。內建預設已處理，自訂時需自行檢查。

與 Vue 版的關係

本頁工具移植自 lh-ui-plus 的 ThemeStudio，令牌預設值、分組、暗色推導邏輯全部一致，匯出的 SCSS 在兩個庫通用（令牌定義在共享層 @lh-ui/share/styles/theme/common/var.scss）。

使用方法​

匯出文字的結構​

注意事項​

使用方法

匯出文字的結構

注意事項