الألوان والوضع الداكن

لون العلامة

يلوّن لون العلامة الأزرار، وعنصر الشريط الجانبي النشط، وإبرازات المخططات، وبطاقات الدفع. تتوفر أربع سمات:

السمة المستخدمة هي DEFAULT_THEME_COLOR في src/Demo/ThemeColorSwitcher/themes.ts. اضبطه على id سمة أخرى:

export const DEFAULT_THEME_COLOR = "blue";

لاستخدام لونك الخاص، عدّل إحدى السمات في الملف نفسه، مثل brandPrimary للون الرئيسي وbrandPrimaryLight لدرجته الأفتح، وأبقِ id الخاص بها في DEFAULT_THEME_COLOR.

مع تفعيل الوضع التجريبي، يتيح مبدّل عائم تجربة السمات، ويتذكر المتصفح ما تختاره هناك. ويتغلب هذا الاختيار على DEFAULT_THEME_COLOR إلى أن تمسح بيانات الموقع. ومع تعطيل الوضع التجريبي، يُخفى المبدّل ويستخدم التطبيق دائمًا DEFAULT_THEME_COLOR.

• لا يظهر لون جديد

الوضعان الفاتح والداكن

زر الشمس والقمر في الترويسة، والوضع الداكن ضمن الإعدادات ثم التفضيلات، يبدّلان بين الداكن والفاتح. تبدأ لوحة التحكم في الوضع الداكن، ويتذكر المتصفح الوضع الذي يختاره كل مستخدم.

خلفيات الوضعين وحدودهما وألوان النصوص فيهما متغيرات في src/styles/theme.css: الفاتحة في :root، والداكنة في .dark. مثلًا خلفية الصفحة:

:root {
    --color-bg-primary: #f8fafc;
}

.dark {
    --color-bg-primary: #030303;
}

تبقى هذه كما هي في كل سمات العلامة؛ وحدها ألوان العلامة تتغير مع السمة.

كيف تُطبَّق الألوان

أضف سمة أو أزل المبدّل