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

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

主色

--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 自定义主题 —— 由主题定制台生成（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;
}

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

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

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.ts
import './lh-theme.scss'

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

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

vue

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

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

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

ملاحظات

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

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

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

ملاحظات ​

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

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

ملاحظات