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

استوديو السمات أداة تفاعلية: اختر قالبًا مسبق الإعداد، عدِّل كل رمز لوني، عاين النتيجة فوريًا، ثم صدِّر ملف SCSS جاهزًا للاستخدام مباشرة.

مسبق الإعداد

主色

悬停

按压

主色底

主色边框

主色衍生

主色底文字

选中态文字

功能色

成功

警告

危险

信息

文本

主要文字

常规文字

次要文字

背景

容器背景

页面背景

边框

基础边框

浅边框

معاينة فورية

وسم أساسيوسم نجاحوسم خطر

محدّد

نص أساسي·نص عادي·نص ثانوي

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

تصدير SCSS

/* lh-ui 自定义主题 —— 由主题定制台生成（2026-10-15）
 * 令牌定义见 @lh-ui/share/styles/theme/common/var.scss；暗色块与预设机制同源
 *（浅主色下 --lh-color-on-primary / --lh-selected-color 需显式声明，否则白字不达 AA） */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  --lh-primary-color-hover: #3D649E;
  --lh-primary-color-active: #1F3A5F;
  --lh-primary-color-bg: #E8EDF3;
  --lh-primary-color-border: #D4DCE8;
  --lh-color-on-primary: #FFFFFF;
  --lh-success-color: #5B8C5A;
  --lh-warning-color: #C4A35A;
  --lh-danger-color: #B23A3A;
  --lh-info-color: #7A7A7A;
  --lh-text-primary: #2C2C2C;
  --lh-text-regular: #5A5A5A;
  --lh-text-secondary: #8A8A8A;
  --lh-bg-color: #FAF6F0;
  --lh-bg-color-page: #F5F0EB;
  --lh-border-color-base: #D8D3CC;
  --lh-border-color-light: #E5E0D8;
}

[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-primary-color: color-mix(in srgb, #2B4C7C 55%, #fff);
  --lh-primary-color-hover: color-mix(in srgb, var(--lh-primary-color) 70%, #fff);
  --lh-primary-color-active: color-mix(in srgb, var(--lh-primary-color) 85%, #000);
  --lh-color-on-primary: #101410;
}

طريقة الاستخدام

اختيار القالب المسبق: بدِّل عبر القائمة المنسدلة العلوية بين خمسة ألواح ألوان مدمجة (青花瓷 (الخزف الأزرق) / 松花绿 (أخضر الصنوبر) / 朱砂 (زنجفر) / 水墨 (رسم الحبر) / 藤黄 (أصفر عشبي))، ويغطّي القالب المسبق ما يصرِّح به من رموز فقط، بينما تحتفظ البقية بقيمها الحالية.
تعديل الرموز: لكل مجموعة رموز منتقي ألوان وحقل نص hex متزامنان. والرموز الاختيارية الموصومة بـ «تابع للسلسلة الافتراضية» (مثل --lh-selected-color) تُترَك فارغةً لتتبع علاقة الاشتقاق الافتراضية في ورقة الأنماط.
المعاينة: تُصوِّر منطقة المعاينة مكوّنات حقيقية من lh-ui، وتُحقَن الرموز كمتغيّرات CSS موضعية (بالآلية نفسها لـ LhConfigProvider) فتؤثر في المعاينة وحدها دون التأثير في الموقع. وبدِّل بين الفاتح / الداكن لرؤية التكيُّف مع الوضع الداكن.
التصدير: يحتوي نص SCSS المُصدَّر (منسوخًا أو محمَّلًا) على كتلة رموز :root وكتلة الوضع الداكن [data-theme='dark']، ومنطق الوضع الداكن يستمد من آلية القوالب المسبقة في share بالكامل (القوالب ذات الألوان الأساسية الداكنة تُفتِّح لونها الأساسي تلقائيًا في الوضع الداكن، وإلا انصهر الزر مع الخلفية).

بنية النص المُصدَّر

/* سمة lh-ui مخصَّصة — أُنشئت بواسطة استوديو السمات (2026-01-01) */
@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);
  /* ... */
}

يُدرِج @use خط الأساس الكامل للرموز، وتغطِّي كتلة :root الرموز المُعدَّلة فقط.
تُشتَقّ كتلة الوضع الداكن عبر buildPresetDarkVars، وهي مطابقة تمامًا لما تراه في منطقة المعاينة.

ملاحظات

الكتابة في عنصر <style> فقط

عند تطبيق متغيّرات القالب المسبق يجب كتابتها في عنصر <style> (خصوصية 0,1,0)، لا في النمط المضمَّن لـ documentElement — فالخصوصية المضمَّنة 1,0,0,0 أعلى من أي ورقة أنماط، وستطغي على كتلة متغيّرات الوضع الداكن بأكملها في var-dark.scss ممَّا يُفسِد ألوان الوضع الداكن. وكل من useLhPresetTheme في المكتبة وسكربت منع الوميض في هذا الموقع يلتزمان بهذه القاعدة.

تباين الألوان الأساسية الفاتحة

القوالب ذات اللون الأساسي الفاتح (مثل 松花绿) تحتاج إلى تعيين --lh-color-on-primary صراحةً (استخدام الحبر الداكن على أرضية اللون الأساسي) و--lh-selected-color (تعميق نص حالة التحديد)، وإلا فإن النص الأبيض على اللون الأساسي الفاتح لا يحقِّق نسبة التباين AA. وقد عولجت القوالب المدمجة، فعليك فحص ذلك بنفسك عند التخصيص.

العلاقة بنسخة Vue

نُقِلت أداة هذه الصفحة من ThemeStudio في lh-ui-plus، والقيم الافتراضية للرموز والتجميعات ومنطق اشتقاق الوضع الداكن كلها متطابقة، فيصلح ملف SCSS المُصدَّر للاستخدام في المكتبتين (تُعرَّف الرموز في الطبقة المشتركة @lh-ui/share/styles/theme/common/var.scss).

طريقة الاستخدام​

بنية النص المُصدَّر​

ملاحظات​

طريقة الاستخدام

بنية النص المُصدَّر

ملاحظات