إذا كنت تقضي ساعات طويلة أمام الشاشة، فلا شك أنك قدّرت إمكانية تفعيل الوضع الداكن في تطبيق أو موقع ويب أكثر من مرة. الأمر لا يقتصر على الجماليات فحسب، بل هو ميزة جيدة. يمكن للوضع الداكن أن يقلل من إجهاد العينتساعد على التركيز، وفي بعض الأجهزة، توفر بعضًا من طاقة البطارية.
الخبر السار هو أن تفعيل الوضع الداكن على موقعك ليس بالأمر الصعب. فبمزيج من متغيرات CSS، واستعلامات الوسائط، وقليل من جافا سكريبت الاختيارية يمكنك إنشاء سمات فاتحة وداكنة مرنة وسهلة الوصول والصيانة دون إعادة كتابة ورقة الأنماط الخاصة بك من الأعلى إلى الأسفل.
ما هو الوضع الداكن تحديداً ولماذا يُستخدم؟
عندما نتحدث عن الوضع المظلم أو وضع الظلام نحن نشير إلى نظام ألوان يكون فيه تصبح الخلفيات داكنة ويتم عرض المحتوى الرئيسي بألوان فاتحة.إنه عكس التصميم الكلاسيكي للنص الداكن على خلفية بيضاء، والذي كان هو السائد على الإنترنت لسنوات.
تسمح أنظمة التشغيل الحديثة (ويندوز، ماك أو إس، آي أو إس، أندرويد...) قم بضبط تفضيل عام للوضع الفاتح أو الداكن.يُفعّل العديد من المستخدمين الوضع الداكن في البيئات ذات الإضاءة الخافتة، إما لراحة المستخدم أو لمجرد تفضيله جمالياً. إذا كان موقعك الإلكتروني يدعم هذا الخيار، فأنت بذلك تمنحه ميزة كبيرة. تجربة المستخدم وإمكانية الوصول.
علاوة على ذلك، في شاشات OLED وAMOLED، تستهلك وحدات البكسل السوداء أو شبه السوداء طاقة أقل، لذا يمكن للوضع الداكن المصمم جيدًا أن يساعد في توفير البطاريةوخاصة على الأجهزة المحمولة.
المبادئ الأساسية لتصميم الوضع الداكن
لا يقتصر الأمر على عكس الألوان فحسب. لكي يعمل الوضع الداكن بشكل جيد، يجب مراعاة العديد من تفاصيل التصميم وسهولة الوصول، لأن التباين الضعيف قد يكون مزعجًا تمامًا مثل واجهة ساطعة للغاية.
التباين والوضوح
النقطة الحاسمة الأولى هي التباين بين الخلفية والنص. يجب أن يكون المحتوى سهلة القراءة على الخلفيات الداكنة دون التسبب في وهج.توصي إرشادات WCAG بنسبة عرض إلى ارتفاع لا تقل عن 4.5:1 للنص العادي، على الرغم من أنه في الوضع المظلم من الشائع جدًا السعي إلى قيم حوالي 7:1 لتحسين الراحة.
من الأمثلة الشائعة استخدام خلفية سوداء تقريبًا ونص رمادي فاتح، وليس أبيض ناصعًا. على سبيل المثال، شيء من هذا القبيل لون الخلفية:121212 واللون:E0E0E0 عادة ما ينتج عنه نتيجة سلسة وواضحة، متجنباً تأثير اللون الأبيض النقي على اللون الأسود الكامل.
اختيار لوحة الألوان والألوان المميزة
في الأمور الغامضة يُنصح تجنب الألوان المشبعة والصارخةلأنها على خلفية داكنة تميل إلى أن تكون ساطعة للغاية وتجهد العين بسرعة. من الأفضل اختيار درجات ألوان أكثر نعومة وأقل تشبعًا للأزرار والروابط والعناصر المميزة.
كما يُنصح بتجنب اللون الأسود المطلق (#000000) والأبيض النقي (#FFFFFF). أسود مرتفع قليلاً وأبيض باهت إلى حد ما فهي تجعل التباين أكثر جاذبية. على سبيل المثال، بدلاً من استخدام اللون الأبيض النقي كلون مميز، يمكنك اختيار شيء مثل #BB86FC أو ذهبي ناعم ذلك الذي يبرز دون أن يكون صارخاً.
إمكانية الوصول وتفضيلات المستخدم
يتطلب تصميم الوضع الداكن مراعاة المستخدمين ذوي القدرات البصرية المختلفة. لا يكفي أن "يبدو جميلاً"؛ بل يجب أن يكون مناسب أيضاً للأشخاص الذين يعانون من ضعف البصر أو الحساسية للضوء الساطعيشمل ذلك التحقق من التباينات، وحالات التركيز، وحالات الخطأ، والعناصر التفاعلية.
بالإضافة إلى اللون، من المهم احترام التفضيلات الأخرى مثل تقليل الحركةإذا أشار المستخدم إلى تفضيله لعدد أقل من الرسوم المتحركة، فيجب تعديل انتقالاتك بين السمات باستخدام، على سبيل المثال، استعلام الوسائط. يفضل انخفاض الحركة لتقليل أو إزالة الرسوم المتحركة في تلك الحالات.
لماذا تُعدّ متغيرات CSS مفتاح الوضع الداكن؟
تُعد متغيرات CSS (الخصائص المخصصة) مثالية لإدارة نظام السمات لأنها تسمح قم بتجميع جميع الألوان والأنماط المرتبطة بالسمات في مكان واحد.بدلاً من تكرار القيم في جميع أنحاء ورقة الأنماط، يمكنك تعريف بعض المتغيرات ثم إعادة استخدامها مع الدالة. var().
من المعتاد تعريف هذه المتغيرات في الفئة الزائفة :root، مما يشير إلى العنصر <html>على سبيل المثال، يمكنك تعريف الألوان الأساسية للنمط الفاتح بهذا الشكل:
:root {
--color-fondo: #ffffff;
--color-texto: #333333;
--color-acento: #007BFF;
}ومن هناك، تستخدم بقية ورقة الأنماط هذه الخصائص المخصصة بدلاً من القيم الثابتة:
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
a,
button {
color: var(--color-acento);
}إذا قررت تغيير لوحة الألوان أو إضافة سمة داكنة، فستحتاج فقط إلى أعد تعيين قيم تلك المتغيرات في سياق آخر (الفئات، والخصائص، واستعلامات الوسائط ...) بدلاً من مراجعة كل قاعدة على حدة.
قم بتطبيق الوضع الداكن باستخدام استعلامات الوسائط (prefers-color-scheme)
إنّ الطريقة الأكثر سهولةً للمستخدم هي ترك النظام يحدد الشروط. استعلام الوسائط prefers-color-scheme يسمح لك قم بتكييف المظهر تلقائيًا مع التفضيلات العامة للجهاز..
هناك نهجان شائعان الاستخدام: تحديد إصدارات منفصلة للوضع الفاتح والوضع الداكن، أو التعامل مع الوضع الفاتح باعتباره الوضع الافتراضي واستبداله فقط عندما يطلب النظام الوضع الداكن.
حدد المتغيرات حسب الوضع باستخدام استعلامات الوسائط
يتمثل أحد الأنماط البسيطة للغاية في تعريف المتغيرات الأساسية ثم تغييرها ضمن استعلامات الوسائط المحددة:
/* Tema claro por defecto */
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
/* Tema oscuro cuando el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}في هذا المثال، سيستخدم الجسم دائمًا الخلفية: var(–body-bg) واللون: var(–body-color)الشيء الوحيد الذي يتغير هو قيمة المتغيرات وفقًا لتفضيلات النظام. إذا تمت إضافة المزيد من القيم إلى النظام في المستقبل... prefers-color-schemeسيظل لديك وضع مسح افتراضي محدد بشكل صحيح.
يمكنك أيضاً أن تكون أكثر وضوحاً وتحدد كلا الوضعين:
@media (prefers-color-scheme: light) {
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}سيجعل هذا موقعك يتكيف تلقائيًا مع الوضع الفاتح أو الداكن المختار في نظام التشغيل.، دون أن يضطر المستخدم إلى تعديل أي إعدادات داخل الموقع الإلكتروني.
الوضع الداكن بدون جافا سكريبت باستخدام :has() ومربع اختيار
إذا كنت ترغب في توفير خيار تبديل المظهر داخل الصفحة ولكنك لا ترغب في استخدام جافا سكريبت، فيمكنك استخدام محدد علائقي. :has()يُتيح لك هذا المُحدِّد تطبيق أنماط على عنصر أب عندما يحتوي على طفل يستوفي شرطاً معيناً.، وفي هذه الحالة، خانة اختيار مُحددة.
الفكرة هي تحديد ألوان الإضاءة أولاً كأساس:
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}ثم استغل الفرصة :has() لتغيير المتغيرات عند تفعيل خانة اختيار الوضع الداكن:
body:has(#darkmode-toggle:checked) {
--bg-color: #1e1e1e;
--text-color: #f5f5f5;
}في لغة HTML، أنت تحتاج إلى واحد فقط مربع اختيار يعمل كمفتاح تشغيل/إيقاف:
<input type="checkbox" id="darkmode-toggle" />
<label for="darkmode-toggle">Modo oscuro</label>عندما يحدد المستخدم المربع، يتم تحديد العنصر المحدد يدخل عنصر body:has(#darkmode-toggle:checked) حيز التنفيذ وتتغير قيم المتغيرات إلى قيم داكنة. لكنّ العيب الرئيسي في هذا الأسلوب هو عدم حفظ هذا التفضيل عبر الصفحات أو الزيارات، لعدم استخدام أي مساحة تخزين أو منطق إضافي.
مُبدِّل السمات باستخدام الفئات، وجافا سكريبت، والتخزين المحلي
إذا كنت تبحث عن نظام أكثر اكتمالاً، فإن النهج المعتاد هو إضافة أو إزالة فئة (أو سمة بيانات) في العنصر الجذر وإدارة التغيير باستخدام JavaScript، مع حفظ اختيار المستخدم أيضًا.
حدد المتغيرات وفقًا لفئة الموضوع
أولاً، تقوم بتحديد ألوان الإضاءة الافتراضية في :root ثم هناك صيغة غامضة عندما يكون للعنصر الجذر فئة محددة، مثل tema-oscuro:
:root {
--color-fondo: #ffffff;
--color-texto: #000000;
--color-principal: #007bff;
}
:root.tema-oscuro {
--color-fondo: #333333;
--color-texto: #ffffff;
--color-principal: #BB86FC;
}أما الأنماط الأخرى فتستمر في الاستخدام var(-background-color) و var(-text-color) ومتغيرات أخرىلذا فإن تغيير الموضوع يعادل تغيير الحصص الدراسية tema-oscuro en <html> o <body>.
أنشئ المفتاح في لغة HTML واجعله يعمل باستخدام جافا سكريبت.
في لغة الترميز، يمكنك استخدام مربع اختيار بسيط، أو زر، أو مفتاح تبديل أكثر تعقيدًا. مثال بسيط على ذلك:
<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>باستخدام جافا سكريبت، يمكنك الاستماع إلى تغيير المفتاح وإضافة أو إزالة الفئة من العنصر الجذر، بالإضافة إلى احفظ التفضيلات في التخزين المحلي لتجنب فقدانه أثناء التصفح أو إعادة التحميل:
// Al cargar la página, aplicamos el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
document.documentElement.classList.add('tema-oscuro');
document.getElementById('interruptor-tema').checked = true;
}
// Actualizamos cuando el usuario cambia el toggle
document.getElementById('interruptor-tema').addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('tema-oscuro');
localStorage.setItem('tema', 'oscuro');
} else {
document.documentElement.classList.remove('tema-oscuro');
localStorage.setItem('tema', 'claro');
}
});بهذا النهج يمكنك تحقيق الوضع المظلم الدائم الذي يتحكم فيه المستخدم، مع الاستمرار في الاستفادة من متغيرات CSS للحفاظ على نظافة الكود.
استخدم سمات البيانات أو سمة البيانات كمحدد
بدلاً من استخدام فئة، يمكنك أيضاً استخدام سمة مثل data-themeيُعد هذا الأمر ملائمًا بشكل خاص إذا كنت تعمل مع أطر عمل أو أدوات مساعدة مثل Tailwind CSS، والتي تسمح لك بتكوين المتغير. مظلم بحيث يتم تفعيله عند وجود محدد من النوع بدلاً من استعلام الوسائط.
في لغة CSS الأصلية، سيكون النمط مشابهاً جداً:
:root {
--color-fondo: #FFFFFF;
--color-texto: #333333;
--color-acento: #007BFF;
}
{
--color-fondo: #121212;
--color-texto: #E0E0E0;
--color-acento: #BB86FC;
}تطبيق السمة على العنصر الجذر:
<html lang="es" data-theme="dark">سيتحول الموقع بأكمله إلى استخدام القيم الداكنة. إذا قمت بتغيير السمة إلى light أو يمكنك إزالته، وستعود إلى الموضوع الأساسي. لا يتغير كود جافا سكريبت للتبديل بين الحالتين كثيرًا مقارنةً بحالة الفئات: ببساطة تستدعي setAttribute('data-theme', 'dark') o 'ضوء' حسب اختيار المستخدم.
دمج سمة النظام والمحدد اليدوي
من السيناريوهات الشائعة جداً الرغبة في دعم ثلاث ولايات: الوضع الفاتح، والوضع الداكن، و"وضع استخدام النظام"للقيام بذلك يمكنك الجمع prefers-color-scheme مع الفئات أو السمات، واستخدامها window.matchMedia() للكشف عن وضع النظام عندما يختار المستخدم اتباع هذا الخيار.
الفكرة العامة هي:
- إذا اختار المستخدم صراحةً الوضع الفاتح أو الداكن، فسيتم حفظ هذا التفضيل وتطبيقه باستخدام فئة أو سمة (على سبيل المثال، data-theme="dark").
- إذا اخترت "النظام"، فلن تفرض أي سمة محددة وستترك استعلامات الوسائط تتولى الأمر. يفضل نظام الألوان أولئك الذين يحددون القيم الافتراضية.
- يمكنك، إن شئت، الاستماع إلى التغييرات في matchMedia('(prefers-color-scheme: dark)') للتفاعل إذا قام المستخدم بتغيير سمة النظام بشكل فوري.
يتناسب هذا النمط بشكل جيد للغاية مع أدوات مثل Tailwind، حيث يمكنك تحديد ما إذا كان المتغير مظلم على أساس prefers-color-scheme أو في فئة/سمة، وحتى مزامنتها مع تفضيل مخزن على العميل أو الخادم.
ما وراء اللون: الطباعة وعناصر واجهة المستخدم
لا ينبغي أن يقتصر تفعيل الوضع الداكن على تغيير أربعة ألوان فقط. فهناك تفاصيل أخرى تستحق التعديل لجعل التجربة مريحة ومتناسقة حقًا.
بادئ ذي بدء ، فمن المستحسن قم بزيادة حجم الخط وتباعد الأسطر قليلاً في السمات الداكنة، لأن النص على خلفية داكنة يميل إلى الظهور بشكل أكثر كثافة. زيادة طفيفة في الحجم الأساسي أو في خط الطول يمكن أن تحدث فرقا.
من المستحسن أيضًا مراجعة الأزرار والروابط والبطاقات ومكونات واجهة المستخدم الأخرى. في الوضع الداكن، يمكنك استخدام ظلال ناعمة، حواف دقيقة، أو تدرجات لونية خفيفة للغاية لإضفاء إحساس بالعمق دون اللجوء إلى خلفيات مسطحة تجعل كل شيء يبدو عالقًا في نفس المستوى.
لا تنسَ التغذية الراجعة المرئية: الحالات التحليق، والتركيز، والنشاط يجب أن تبقى واضحة. في التصميمات ذات الطابع الداكن، عادةً ما يكون تغيير اللون أو زيادة سطوع اللون المميز قليلاً أفضل من استخدام درجة لونية صارخة للغاية.
أدوات الاختبار وإمكانية الوصول والتحقق
بعد إعداد نظام القوالب، حان الوقت لاختباره فعلياً. مجرد رؤيته في متصفحك الرئيسي لا يكفي؛ بل هو أمر بالغ الأهمية. تأكد من أن الوضع الداكن يعمل بشكل جيد على مختلف الأجهزة والمتصفحات والإعدادات.
من الأدوات المفيدة لهذه المرحلة ما يلي: أدوات مطوري Chrome (جرب كيفية فرض الوضع الداكن في Google Chrome)يتضمن متصفحا فايرفوكس وسفاري خيارات لمحاكاة يفضل نظام الألوان دون الحاجة إلى تغيير سمة النظام. يمكنك أيضًا استخدام منارة للتحقق من إمكانية الوصول والتباينات، أو خدمات الاختبار المتبادل مثل CrossBrowserTesting للتحقق من أن الأنماط لا تتعطل في المتصفحات الأقل شيوعًا.
بالإضافة إلى الاختبارات الفنية، يجدر جمع تعليقات المستخدمين الحقيقيينيمكن للاستطلاعات الصغيرة، أو النماذج الموجودة داخل الموقع نفسه، أو جلسات اختبار المستخدم أن تكشف عن مشاكل في سهولة القراءة، أو عدم كفاية التباين، أو العناصر التي تمر دون ملاحظة في الوضع الداكن.
يُتيح لك تطبيق الوضع الداكن الحديث باستخدام متغيرات CSS مراعاة تفضيلات النظام، وتوفير مُحدِّد سمات مرن، والحفاظ على نظافة الكود، وضمان سهولة الوصول - وهو أمرٌ يُقدِّره المستخدمون ومحركات البحث بشكلٍ متزايد. بفضل أساسٍ متين من المتغيرات، واستعلامات الوسائط المصممة جيدًا، ولمسة من جافا سكريبت عند الضرورة لضمان استمرارية التغييرات، يُمكن لموقعك الانتقال بسلاسة بين السمات الفاتحة والداكنة دون أن يُصبح فوضى عارمة من الأنماط التي يصعب صيانتها.