프리셋 테마

@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>
  )
}

깜빡임 방지

이 사이트는 빌드 시 "프리셋 이름 → 스타일 텍스트"를 HTML head의 동기 스크립트로 직렬화해, 첫 페인트 전에 localStorage에 기억된 프리셋을 적용합니다. 새로고침할 때 기본 색이 먼저 깜빡이고 나서 전환되는 것을 막기 위함입니다. 설정은 docs/docusaurus.config.ts의 PRESET_FOUC_SCRIPT에 있습니다.

인라인 style을 쓸 수 없음

프리셋 변수는 반드시 <style> 요소에만 작성해야 하고, document.documentElement.style에 쓸 수 없습니다: 인라인 스타일의 명시도 1,0,0,0이 항상 스타일시트를 눌러, 런타임에 프리셋을 전환해도 페이지가 여전히 옛 인라인 값을 읽고 var-dark.scss의 다크 변수 전체를 누르기 때문입니다.