السمات المعدة مسبقًا

تتضمّن lh-ui-plus 5 سمات صينية مسبقة الإعداد جاهزة للاستخدام الفوري. وهناك طريقتان للاستخدام:

• التبديل العام (موصى به): يكتب useLhPresetTheme متغيرات السمة المسبقة في :root، فتعمّ الموقع بأكمله وتُحفظ في localStorage.
• التبديل المحلي: يؤثّر LhConfigProvider :theme-vars في شجرته الفرعية فقط، وهو مناسب لعرض عدة سمات متجاورة في الصفحة نفسها.

يمكن الحصول على متغيرات السمات المسبقة عبر getThemeVars(name) (من @lh-ui/vue3/theme)، وقيم name موضّحة في الأقسام أدناه.

تبديل السمة على مستوى الموقع

يوفّر هذا الموقع قائمة منسدلة «سمات مسبقة» في شريط التنقّل العلوي للتبديل بنقرة واحدة بين 5 سمات صينية. ويُحفظ الاختيار في localStorage['lh-docs-preset'] ويبقى محفوظًا بعد التحديث.

سمات الإعداد المسبق والوضعان الفاتح والداكن نظامان مستقلان على محورين: يبدّل أيقونا 🌙/☀️ في يمين شريط تنقّل VitePress بين الوضعين الفاتح والداكن، بينما تبدّل قائمة «سمات مسبقة» لوحة الألوان (الخزف الأزرق 青花瓷 والزنجفر 朱砂 وأخضر الصنوبر 松花绿 وغيرها). وتعمل السمات المسبقة في الوضع الداكن أيضًا، فتظهر كسمات داكنة بدرجات ألوان مختلفة.

الخاصيتان العامتان themeVars وbgPattern

تدعم جميع مكوّنات lh-ui-plus تجاوز السمة محليًا عبر LhConfigProvider أو عبر خاصية themeVars الخاصة بالمكوّن؛ كما تُدارة خلفيات الأنماط بشكل موحَّد عبر خاصية bgPattern (وتُنتقى المكوّنات التي يطبَّق عليها النمط من القائمة البيضاء patternComponents في ConfigProvider). وكون هاتين الخاصيتين قدرتين عامتين عبر المكوّنات، فإنهما لا تُذكران بالتفصيل في صفحات المكوّنات، بل تُشرحان في تخصيص السمات ونظام خلفيات الأنماط.

الخزف الأزرق 青花瓷 (ceramic blue) — الافتراضية

السمة الافتراضية، مستوحاة من طلاء الخزف الأزرق تحت التزجيج، صافية وأنيقة. اسم السمة المسبقة: cerblue.

سمة الخزف الأزرق

وسم

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

// مفاتيح القيمة المُعادة من getThemeVars تحمل البادئة --lh-، ومعالجة البادئة في ConfigProvider غير فعّالة (idempotent)، فيمكن تمريرها مباشرة
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhButton type="success">نجاح</LhButton>
      <LhButton type="warning">تحذير</LhButton>
      <LhButton type="danger">خطر</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

أخضر الصنوبر 松花绿 (pine green)

أخضر غابات الخيزران، مفعم بالحياة. اسم السمة المسبقة: songhua.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const songhuaTheme = getThemeVars('songhua')
</script>

<template>
  <LhConfigProvider :theme-vars="songhuaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

الزنجفر 朱砂 (cinnabar red)

أحمر الزنجفر التقليدي لأختام الحبر، احتفالي ووقور. اسم السمة المسبقة: zhusha.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const zhushaTheme = getThemeVars('zhusha')
</script>

<template>
  <LhConfigProvider :theme-vars="zhushaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

رسم الحبر 水墨 (ink wash)

ألوان الحبر والألوان المائية، بسيطة وأنيقة. اسم السمة المسبقة: shuimo.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const shuimoTheme = getThemeVars('shuimo')
</script>

<template>
  <LhConfigProvider :theme-vars="shuimoTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

الأصفر العشبي 藤黄 (golden autumn)

أصفر الخريف الدافئ، ذهبي دافئ. اسم السمة المسبقة: golden.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const goldenTheme = getThemeVars('golden')
</script>

<template>
  <LhConfigProvider :theme-vars="goldenTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

مقارنة السمات

السمة	اسم السمة المسبقة	اللون الأساسي --lh-primary-color	خلفية اللون الأساسي --lh-primary-color-bg	الوصف
الخزف الأزرق 青花瓷	cerblue	#2B4C7C	#E8EDF3	طلاء الخزف الأزرق تحت التزجيج، صافٍ وأنيق
أخضر الصنوبر 松花绿	songhua	#5B8C5A	#E8F5E8	أخضر غابات الخيزران، مفعم بالحياة
الزنجفر 朱砂	zhusha	#B23A3A	#FDF0F0	أحمر الزنجفر التقليدي للأختام، احتفالي ووقور
رسم الحبر 水墨	shuimo	#2C2C2C	#F5F5F5	ألوان الحبر والألوان المائية، بسيط وأنيق
الأصفر العشبي 藤黄	golden	#B8860B	#FBF6EA	أصفر الخريف الدافئ، ذهبي دافئ

تغطّي السمات المسبقة لوحة اللون الأساسي (primary) فقط، ويمثّل --lh-primary-color-bg لون الخلفية المُخفَّف للون الأساسي وليس لون خلفية الصفحة بأكملها.

التبديل البرمجي

آليتان، تُختار حسب النطاق المطلوب:

• التبديل العام (موصى به): يكتب useLhPresetTheme متغيرات السمة المسبقة في :root، فتعمّ الموقع بأكمله وتُحفظ في localStorage ويبقى الاختيار محفوظًا بعد التحديث. دون الحاجة إلى تغليف بـ LhConfigProvider.
• التبديل المحلي: يؤثّر LhConfigProvider :theme-vars في شجرته الفرعية فقط، وهو مناسب لعرض عدة سمات متجاورة في الصفحة نفسها.

التبديل العام للسمات المسبقة

تتب مجموعة أزرار التبديل هذه القيمة في :root، لذا يتأثر موقع التوثيق بأكمله — ولهذا السبب لا تُكرَّر تجربة التبديل العام على هذه الصفحة.

<script setup lang="ts">
import { LhButton, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets } = useLhPresetTheme()
</script>

<template>
  <LhButton
    v-for="theme in presets"
    :key="theme.name"
    :type="preset === theme.name ? 'primary' : 'default'"
    @click="setPreset(theme.name)"
  >
    {{ theme.label }}
  </LhButton>
</template>

التبديل في نطاق محلي

يُوقف تمرير applyToRoot: false الكتابة العامة، ويُكتفى بأخذ themeVars المُعادة (بعد إزالة البادئة --lh- وفق اصطلاح ConfigProvider)، ويُترك تحديد النطاق للـ Provider.

يجب وضع أزرار التبديل خارج LhConfigProvider، وإلا ستتغيّر ألوان الأزرار نفسها مع السمة:

تبديل سمة مسبقة في نطاق محلي

وسم

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme({ applyToRoot: false })
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px">
    <LhButton
      v-for="theme in presets"
      :key="theme.name"
      :type="preset === theme.name ? 'primary' : 'default'"
      @click="setPreset(theme.name)"
    >
      {{ theme.label }}
    </LhButton>
  </div>
  <LhConfigProvider :theme-vars="themeVars">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">الزر الرئيسي</LhButton>
      <LhButton type="success">نجاح</LhButton>
      <LhButton type="warning">تحذير</LhButton>
      <LhButton type="danger">خطر</LhButton>
      <LhTag type="primary">وسم</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

كتابة البادئة: معالجة البادئة في ConfigProvider غير فعّالة (idempotent)؛ فمفاتيح القيمة المُعادة من getThemeVars() (من @lh-ui/vue3/theme) تحمل البادئة --lh- ويمكن تمريرها مباشرة إلى :theme-vars، أما themeVars المُعاد من useLhPresetTheme() فقد أُزيلت منه البادئة. وكلاهما صالح للاستخدام في :theme-vars دون معالجة إضافية.