استوديو السمات

لا تريد الاكتفاء بالسمات المسبقة؟ اختر سمة مسبقة في الاستوديو التالي نقطة انطلاق، واضبط كل رمز تصميم حسب ألوانك، ليتفعَّل في منطقة المعاينة فورًا، ثم صدِّر ملف scss ضعه مباشرة في مشروعك — دون إعادة بناء مكتبة المكوّنات.

مسبق الإعداد Ceramic Blue（cerblue） Pine Green（songhua） Vermilion（zhusha） Ink Wash（shuimo） Golden Autumn（golden） مخصص

اللون الأساسي

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

مشتقات اللون الأساسي

--lh-color-on-primary

--lh-selected-color

ألوان وظيفية

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

النص

--lh-text-primary

--lh-text-regular

--lh-text-secondary

الخلفية

--lh-bg-color

--lh-bg-color-page

الحدود

--lh-border-color-base

--lh-border-color-light

معاينة مباشرة

标签 标签 标签

主要文字·常规文字·次要文字

الرموز التي تعدّلها تنطبق فقط على منطقة المعاينة (نفس آلية ConfigProvider). الملف المُصدَّر يدعم أيضاً الوضع الداكن.

تصدير SCSS

اعتماد السمة المُصدَّرة

هكذا يبدو الملف الذي يُصدِّره الاستوديو (مصدر الرموز في @lh-ui/share/styles/theme/common/var.scss):

@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  /* ... */
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
}

طريقتان للاعتماد:

الطريقة الأولى: الاستيراد الثابت (موصى به) — ضع ملف lh-theme.scss المُصدَّر في مشروعك واستورده في نقطة الدخول:

// main.js
import './lh-theme.scss'

يتضمَّن @use '@lh-ui/share/styles/index.scss' جميع أنماط المكوّنات ورموز السمات، فيكفي سطر واحد؛ والكتلة الداكنة من أصل آلية السمات المسبقة في share، وتُبدِّل تلقائيًا تحت data-theme="dark".

الطريقة الثانية: الحقن وقت التشغيل — استخدم prop الخاص بـ themeVars في LhConfigProvider لتجاوز قيم محلية (المفاتيح بصيغة مختصرة، ويُكمَّل تلقائيًا ببادئة --lh-)، وهو مناسب حين تريد عرض عدة سمات جنبًا إلى جنب في الصفحة نفسها:

<template>
  <LhConfigProvider :theme-vars="{ primaryColor: '#2B4C7C', onPrimary: '#FFFFFF' }">
    <LhButton type="primary">زر رئيسي</LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

تستخدم أمثلة الشيفرة أسماء حزم npm بصورة موحَّدة (@lh-ui/vue2 / @lh-ui/share) لتكون جاهزة للنسخ والاستخدام؛ أما التشغيل الفعلي لموقع التوثيق هذا فيعتمد على الشيفرة المصدرية المحلية للعائلة، لذا تظهر التغييرات فورًا.

ملاحظات

• يجب التصريح صراحةً عن --lh-color-on-primary مع الألوان الفاتحة: النص الأبيض فوق لون أساسي فاتح لا يحقق تباين AA (4.5:1)، ولهذا اعتمدت السمات المسبقة 松花绿 (أخضر الصنوبر) و 藤黄 (أصفر عشبي) النص الحبري بدلًا منه. حقل «نص لون الخلفية الأساسية» في الاستوديو يقابل هذا الرمز.
• عندما يُترك --lh-selected-color فارغًا يتبع السلسلة الافتراضية لـ --lh-primary-color-active؛ ومع الألوان الأساسية الفاتحة يحتاج نص التحديد غالبًا إلى تغميق مستقل (ولهذا نصٌّ في السمات المسبقة).
• بوابة التباين: يعيد pnpm verify:theme في share حساب تباين AA لكل سمة مسبقة وفق أزواج الاستهلاك الفعلية، ويُستحسن لسمة مخصصة مراجعة شرح السمات والتحقق يدويًا.