プリセットテーマ

@lh-ui/share は 5 セットの中華風プリセットカラーパレットを内蔵し、@lh-ui/react はそれをそのまま消費します。プリセットが変えるのは --lh-* 配色変数だけで、明暗モード（useLhTheme）とは直交します。

プリセット一覧

名前	説明
cerblue	青蓝（デフォルト）
songhua	松花
zhusha	朱砂
shuimo	水墨
golden	鎏金

ランタイムでの切り替え

useLhPresetTheme で切り替えます。プリセット変数は <style id="lh-preset-theme">（:root レベル）に書き込まれ、グローバルに有効になります：

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

function PresetSwitcher() {
  const { preset, setPreset, presets } = useLhPresetTheme()

  return (
    <select value={preset} onChange={(e) => setPreset(e.target.value as never)}>
      {presets.map((p) => (
        <option key={p.name} value={p.name}>
          {p.name}
        </option>
      ))}
    </select>
  )
}

戻り値：

フィールド	型	説明
preset	ThemePresetName	現在のプリセット名
setPreset	(name) => void	プリセットを切り替え（同期的に localStorage に書き込む）
presets	ThemePreset[]	全プリセットの一覧
themeVars	Record<string, string>	現在のプリセットの ConfigProvider 互換変数（キーから --lh- 接頭辞を取り除いたもの）

ConfigProvider との連動

themeVars の戻り値はそのまま LhConfigProvider に渡せ、プリセットをグローバルではなくサブツリーにだけ適用できます：

import { LhConfigProvider, useLhPresetTheme } from '@lh-ui/react'

function App() {
  const { themeVars } = useLhPresetTheme({ initialPreset: 'zhusha' })
  return (
    <LhConfigProvider themeVars={themeVars}>
      <YourApp />
    </LhConfigProvider>
  )
}

FOUC の防止

本サイトはビルド時に「プリセット名 → スタイルテキスト」を HTML head の同期スクリプトに直列化し、初回描画の前に localStorage に記憶されたプリセットを適用します。リロード時に一旦デフォルト色が点滅してから切り替わるのを防ぎます。設定は docs/docusaurus.config.ts の PRESET_FOUC_SCRIPT にあります。

インライン style には書けない

プリセット変数は**<style> 要素にしか書けません。document.documentElement.style に書いてはいけません**：インラインスタイルの特異性 1,0,0,0 はスタイルシートを常に圧倒し、ランタイムでプリセットを切り替える時にページが古いインライン値を読み続け、var-dark.scss の暗色変数の全区間をも圧倒してしまいます。