# 主題定制台

不想只用預設？在下面的定制台裡選一個預設作起點，逐令牌調成自己的配色，預覽區即時生效，最後匯出一份 scss 檔案直接放進專案——無需重新編譯元件庫。

主色

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

兩種採納方式：

方式一：靜態引入（推薦）——把匯出的 lh-theme.scss 放進專案，在入口引入：

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

@use '@lh-ui/share/styles/index.scss' 已包含全部元件樣式與主題令牌，一行即可；暗色區塊與 share 的預設機制同源，data-theme="dark" 下自動切換。

方式二：執行時注入——用 LhConfigProvider 的 themeVars 局部覆蓋（鍵為簡寫，自動補 --lh- 前綴），適合同一頁面並列多套主題：

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

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

範例程式碼統一使用 npm 套件名（@lh-ui/vue2 / @lh-ui/share），拷貝即用；本文件站點的實際運行走家族本地源碼，因此改動即時可見。

# 注意事項

淺主色必須顯式宣告 --lh-color-on-primary：白字在淺主色上不達 AA 對比度（4.5:1），預設裡松花綠 / 藤黃都因此改用了墨字。定制台的「主色底文字」欄位即對應此令牌。
--lh-selected-color 留空時跟隨 --lh-primary-color-active 的預設鏈路；淺主色下作選中文字往往需要單獨加深（預設裡同樣有體現）。
對比度門禁：share 的 pnpm verify:theme 按真實消費配對復算每個預設的 AA 對比度，自訂主題建議照著主題的說明自查一遍。

← 主題