السمات

نظام السمات الخاص بعائلة lh-ui معرَّف في @lh-ui/share (المصدر الوحيد)، وتستهلكه مكتبة Vue2 عبر متغيرات CSS.

متغيرات CSS

جميع الرموز مُسمّاة --lh-*، ويُحقنها @lh-ui/vue2/theme.css في :root:

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* القائمة الكاملة في مصدر theme بمستودع share */
}

الوضع الداكن

<link rel="stylesheet" href="@lh-ui/vue2/theme-dark.css" />

<html data-theme="dark">

يُدعم أيضًا شكل .dark class. تتسلسل المتغيرات من ConfigProvider أو من :root، ولا تُكرِّر المكوّنات تعريفها.

التخصيص المحلي عبر ConfigProvider

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">زر بلون خيزران</LhButton>
  </LhConfigProvider>
</template>

الأسبقية: themeVars الخاصة بالمكوّن نفسه > componentTheme[اسم المكوّن] > themeVars العامة؛ أما bg-pattern لنقشة الخلفية فيخضع إضافيًا لقائمة patternComponents البيضاء.

السمات المسبقة والتبديل بينها

يعيد @lh-ui/vue2/theme توجيه السمات المسبقة (presets) الخاصة بـ share والمكتوبة بـ TS (مثل 青花瓷 (الخزف الأزرق) و 松花绿 (أخضر الصنوبر))، ومعها useLhPresetTheme:

import { useLhPresetTheme } from '@lh-ui/vue2'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // تُكتب في :root؛ ويمكن أيضًا تسليم themeVars إلى ConfigProvider ليعمل محليًا

يتولى useLhTheme التبديل بين الفاتح والداكن (data-theme + الحفظ في localStorage).