تخصيص السمة

جميع رموز تصميم @lh-ui/react مصدرها @lh-ui/share/theme، ولا تحتفظ هذه المكتبة بأي نسخة منها. وتخصيص السمة هو تجاوز خصائص CSS هذه.

مستويات الرموز

أولوية الأنماط من الأدنى إلى الأعلى:

theme.css — الرموز الأساسية المنشورة مع @lh-ui/share (--lh-primary-color إلخ)
theme-dark.css — متغيّرات الوضع الداكن (حصرية مع theme.css، أحدهما فقط)
themeVars في LhConfigProvider — متغيّرات تتسلسل على العنصر المُغلَّف
prop themeVars في المكوّن — تُعلَّق على العنصر الجذري للمكوّن فتتجاوز كل ما فوقها

التخصيص عبر ConfigProvider

الطريقة الأكثر توصية: مرِّر themeVars في جذر التطبيق، بأسماء مفاتيح بدون بادئة --lh- (تُضاف تلقائيًا داخليًا):

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

export default function App() {
  return (
    <LhConfigProvider
      themeVars={{
        'primary-color': '#722ed1',
        'bg-color': '#faf9f7',
        'border-radius-base': '6px',
      }}
    >
      <YourApp />
    </LhConfigProvider>
  )
}

تُعرَض المتغيّرات كـ style="--lh-primary-color: #722ed1; ..." على العنصر المُغلَّف وتتسلسل نزولًا.

الرموز المتاحة

المفتاح	الوصف
`primary-color`	اللون الأساسي
`success-color` / `warning-color` / `danger-color` / `info-color`	الألوان الدلالية
`gold-color` / `vermilion-color` / `jade-color`	ألوان النمط الصيني الحصرية (ذهبي / زنجفر / يشم)
`bg-color` / `text-color` / `border-color`	الألوان المحايدة
`bg-pattern`	عنوان URL لنمط الخلفية (مثل `var(--lh-pattern-willow)`)
`bg-pattern-opacity` / `bg-pattern-color`	شفافية نمط الخلفية ولونه
`decoration-color`	لون الزخرفة

تخصيص مكوّن واحد

أي مكوّن يدعم السمة يقبل themeVars مباشرةً ويؤثر في نفسه فقط:

<LhButton themeVars={{ 'primary-color': '#13c2c2' }}>زر سماوي</LhButton>

كما يمكن استخدام componentTheme للتكوين بالجملة حسب اسم المكوّن (أسماء المفاتيح مشتركة مع باقي مكتبات العائلة):

<LhConfigProvider
  componentTheme={{
    button: { 'primary-color': '#722ed1' },
    input: { 'border-color': '#d9d9d9' },
  }}
>
  <YourApp />
</LhConfigProvider>

الأولوية: props الخاصة بالمكوّن > componentTheme[اسم المكوّن] > themeVars العمومي.

نمط الخلفية

نمط الخلفية الصيني مغلق افتراضيًا. ويُفعَّل عبر القائمة البيضاء patternComponents، فلا يُطبَّق النمط العمومي إلا على المكوّنات المدرجة فيها:

<LhConfigProvider
  themeVars={{ 'bg-pattern': 'var(--lh-pattern-willow)' }}
  patternComponents={['dialog', 'card']}
>
  <YourApp />
</LhConfigProvider>

النمط الذي يمرِّره المكوّن بنفسه عبر prop bgPattern لا يخضع للقائمة البيضاء.

تخطيط سريع عبر sx

بعض المكوّنات تدعم prop sx، الذي يكتب أنماط التخطيط الشائعة في شكل كائن (بدلالات توافق sx في emotion / MUI):

<LhButton sx={{ marginTop: 2, width: '100%' }} block>
  زر بعرض كامل
</LhButton>

التبديل وقت التشغيل

جوهر تبديل السمة هو تغيير متغيّرات CSS، لذا يمكن أن يكون ديناميكيًا بالكامل:

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

function App() {
  const [primary, setPrimary] = useState('#1677ff')
  return (
    <LhConfigProvider themeVars={{ 'primary-color': primary }}>
      <input type="color" onChange={(e) => setPrimary(e.target.value)} />
      <YourApp />
    </LhConfigProvider>
  )
}

التأكيد النوعي لمتغيّرات CSS

في النص المصدر يُسبِّب style="{ { '--lh-primary-color': x } }" خطأً في TypeScript (إذ لا تتضمَّن CSSProperties مفاتيح الخصائص المخصَّصة). وتعالج هذه المكتبة ذلك مركزيًا عبر الأداة cssVarsStyle() التي تتولى تحويل أسماء المفاتيح والتأكيد النوعي، وقد غُلِّفت داخل المكوّنات فلا داعي لأن يهتم بها المستخدم.

مستويات الرموز​

التخصيص عبر ConfigProvider​

الرموز المتاحة​

تخصيص مكوّن واحد​

نمط الخلفية​

تخطيط سريع عبر sx​

التبديل وقت التشغيل​