Предустановленные темы

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

Антифликер

Во время сборки сайт сериализует соответствие «имя пресета → текст стиля» в синхронный скрипт в head HTML; он применяет пресет, запомненный в localStorage, до первой отрисовки, чтобы при обновлении страницы не мелькал цвет по умолчанию. Настройка находится в PRESET_FOUC_SCRIPT файла docs/docusaurus.config.ts.

Нельзя использовать inline style

Переменные пресета можно записывать только в элемент <style>, а не в document.documentElement.style: специфичность inline-стиля 1,0,0,0 всегда превосходит таблицы стилей, и при переключении пресета во время выполнения страница продолжит читать устаревшие inline-значения, а весь блок тёмных переменных var-dark.scss будет перекрыт.