プリセットテーマ

lh-ui-plus は 5 つの中華風プリセットテーマを内蔵し、すぐに使えます。2 つの使い方があります：

• グローバル切り替え（推奨）：useLhPresetTheme がプリセット変数を :root に書き込み、サイト全体に反映され localStorage に永続化されます。
• 局所切り替え：LhConfigProvider :theme-vars はそのサブツリーにだけ影響し、同一ページ内に複数のテーマを並べて表示する場合に適しています。

プリセット変数は getThemeVars(name)（@lh-ui/vue3/theme から）で取得できます。name の値は以下の各節を参照してください。

サイトレベルのテーマ切り替え

本サイトでは上部のナビゲーションバーに「テーマプリセット」ドロップダウンがあり、5 種類の中華風テーマをワンクリックで切り替えられます。選択は localStorage['lh-docs-preset'] に永続化され、リロード後も保持されます。

テーマプリセットとライト/ダークモードは独立する 2 つの軸です：VitePress ナビゲーションバー右側の 🌙/☀️ がライト/ダークを切り替え、「テーマプリセット」ドロップダウンがカラーパレット（青花瓷、朱砂、松花绿 など）を切り替えます。ダークモード下でもプリセットは同様に有効で、異なる色調のダークテーマとして表現されます。

共通テーマ属性 themeVars と bgPattern

すべての lh-ui-plus コンポーネントは、LhConfigProvider またはコンポーネント自身の themeVars 属性経由で局所的なテーマ上書きをサポートします。紋様背景は bgPattern 属性で一元的に制御されます（紋様を適用するコンポーネントは ConfigProvider の patternComponents ホワイトリストで決まります）。これら 2 つの属性はコンポーネントをまたぐ共通の能力であるため、各コンポーネントのドキュメントでは一つ一つ例を挙げず、テーマカスタマイズ と 紋様背景システム で統一的に説明します。

青花瓷 / Ceramic Blue（デフォルト）

デフォルトテーマ。青花瓷の釉下彩、清雅で素朴。プリセット名：cerblue。

青花瓷テーマ

タグ

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

// getThemeVars が返すキーには既に --lh- プレフィックスが付いており、
// ConfigProvider のプレフィックス処理は冪等なのでそのまま渡せる
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhButton type="success">成功</LhButton>
      <LhButton type="warning">警告</LhButton>
      <LhButton type="danger">危険</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

松花绿 / Pine Green

竹林に育つ竹のように、生命力にあふれる。プリセット名：songhua。

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const songhuaTheme = getThemeVars('songhua')
</script>

<template>
  <LhConfigProvider :theme-vars="songhuaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

朱砂 / Vermilion

伝統的な印章の朱砂红、祝儀で荘重。プリセット名：zhusha。

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const zhushaTheme = getThemeVars('zhusha')
</script>

<template>
  <LhConfigProvider :theme-vars="zhushaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

水墨 / Ink Wash

水墨丹青、素雅で極めてシンプル。プリセット名：shuimo。

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const shuimoTheme = getThemeVars('shuimo')
</script>

<template>
  <LhConfigProvider :theme-vars="shuimoTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

藤黄 / Golden Autumn

晩秋の楓の黄、温かみのある黄金色。プリセット名：golden。

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const goldenTheme = getThemeVars('golden')
</script>

<template>
  <LhConfigProvider :theme-vars="goldenTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

テーマ比較

テーマ	プリセット名	主要色 --lh-primary-color	主要色の背景 --lh-primary-color-bg	説明
青花瓷	cerblue	#2B4C7C	#E8EDF3	青花瓷の釉下彩、清雅で素朴
松花绿	songhua	#5B8C5A	#E8F5E8	竹林に育つ竹のように、生命力にあふれる
朱砂	zhusha	#B23A3A	#FDF0F0	伝統的な印章の朱砂红、祝儀で荘重
水墨	shuimo	#2C2C2C	#F5F5F5	水墨丹青、素雅で極めてシンプル
藤黄	golden	#B8860B	#FBF6EA	晩秋の楓の黄、温かみのある黄金色

プリセットは主要色（primary）のパレットだけを上書きします。--lh-primary-color-bg は主要色を淡くした背景色で、ページ全体の背景色ではありません。

プログラムによる切り替え

2 つの仕組みがあり、スコープに応じて選びます：

• グローバル切り替え（推奨）：useLhPresetTheme がプリセット変数を :root に書き込み、サイト全体に反映され localStorage に永続化されるため、リロード後も選択が保持されます。LhConfigProvider で包む必要はありません。
• 局所切り替え：LhConfigProvider :theme-vars はそのサブツリーにだけ影響し、同一ページ内に複数のテーマを並べて表示する場合に適しています。

グローバルなプリセット切り替え

以下の切り替えボタン群は :root に書き込むため、ドキュメントサイト全体が影響を受けます —— これが本ページでグローバル切り替えを単独でデモしない理由です。

<script setup lang="ts">
import { LhButton, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets } = useLhPresetTheme()
</script>

<template>
  <LhButton
    v-for="theme in presets"
    :key="theme.name"
    :type="preset === theme.name ? 'primary' : 'default'"
    @click="setPreset(theme.name)"
  >
    {{ theme.label }}
  </LhButton>
</template>

局所スコープでの切り替え

applyToRoot: false を渡すとグローバルへの書き込みを止め、返される themeVars（ConfigProvider の约定に従って --lh- プレフィックスが取り除かれている）だけを取得し、適用範囲を Provider に任せます。

切り替えボタンは LhConfigProvider の外側に置く必要があります。そうしないとボタン自身もテーマの色を変えられてしまいます：

局所的なプリセットテーマ切り替え

タグ

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme({ applyToRoot: false })
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px">
    <LhButton
      v-for="theme in presets"
      :key="theme.name"
      :type="preset === theme.name ? 'primary' : 'default'"
      @click="setPreset(theme.name)"
    >
      {{ theme.label }}
    </LhButton>
  </div>
  <LhConfigProvider :theme-vars="themeVars">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">メインボタン</LhButton>
      <LhButton type="success">成功</LhButton>
      <LhButton type="warning">警告</LhButton>
      <LhButton type="danger">危険</LhButton>
      <LhTag type="primary">タグ</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

プレフィックスの書き方：ConfigProvider のプレフィックス処理は冪等です。getThemeVars()（@lh-ui/vue3/theme から）が返すキーには既に --lh- プレフィックスが付いており、そのまま :theme-vars に渡せます。一方 useLhPresetTheme() が返す themeVars はプレフィックスが取り除かれています。どちらもそのまま :theme-vars に使え、二次的な処理は不要です。