預設主題

@lh-ui/share 內建五套國風預設色板，@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>
  )
}

防閃爍

本站構建期把「預設名 → 樣式文字」序列化進 HTML head 的同步腳本，在首次繪製前套用 localStorage 中記憶的預設，避免重新整理時先閃預設色再切換。設定在 docs/docusaurus.config.ts 的 PRESET_FOUC_SCRIPT。

不能用行內 style

預設變數只能寫 <style> 元素，不能寫 document.documentElement.style：行內樣式特異性 1,0,0,0 恆壓樣式表，會導致執行時切換預設時頁面仍讀舊行內值，且壓過 var-dark.scss 的整段暗色變數。