テーマ

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 の永続化）を担います。