主題

lh-ui 家族的主題體系在 @lh-ui/share 定義（唯一源），Vue2 庫透過 CSS 變數消費。

CSS 變數

所有令牌命名 --lh-*，由 @lh-ui/vue2/theme.css 注入 :root：

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* 完整清單見 share 倉庫 theme 源 */
}

暗色模式

<link rel="stylesheet" href="@lh-ui/vue2/theme-dark.css" />

<html data-theme="dark">

同時支援 .dark class 形式。變數級聯自 ConfigProvider 或 :root，元件自身不重複宣告。

ConfigProvider 局部定制

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">竹青按鈕</LhButton>
  </LhConfigProvider>
</template>

優先級：元件自身 themeVars > componentTheme[元件名] > 全域 themeVars； bg-pattern 花紋額外受 patternComponents 白名單控制。

預設主題與預設切換

@lh-ui/vue2/theme 轉發 share 的 TS 預設（青花瓷、松花綠等），配套 useLhPresetTheme：

import { useLhPresetTheme } from '@lh-ui/vue2'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // 寫入 :root；themeVars 亦可交給 ConfigProvider 局部作用

useLhTheme 負責明暗切換（data-theme + localStorage 持久化）。