السمات المسبقة

تُدمج @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>
  )
}

منع الوميض (FOUC)

تُسلسِل هذه الموقع في وقت البناء «اسم القالب المسبق ← نص الأنماط» في سكربت متزامن داخل HTML head، فتُطبَّق القيمة المُذكَّرة في localStorage قبل أول رسم، لتفادي وميض اللون الافتراضي قبل التبديل عند التحديث. والإعداد في PRESET_FOUC_SCRIPT ضمن docs/docusaurus.config.ts.

لا يمكن استخدام النمط المضمَّن

تُكتب متغيّرات القالب المسبق في عنصر <style> فقط، لا في document.documentElement.style: فالخصوصية المضمَّنة 1,0,0,0 تطغى دائمًا على ورقة الأنماط، مما يجعل الصفحة تقرأ القيمة المضمَّنة القديمة عند تبديل القالب وقت التشغيل، وتطغى على كتلة متغيّرات الوضع الداكن بأكملها في var-dark.scss.