تطبيق الوضع الداكن: دليل شامل باستخدام CSS وJavaScript

أصبح الوضع الداكن شائعًا بشكل متزايد، حيث يوفر تجربة مشاهدة أكثر راحة، خاصة في البيئات ذات الإضاءة المنخفضة. يقدم هذا الدليل نظرة شاملة حول كيفية تطبيق الوضع الداكن على موقع الويب الخاص بك باستخدام CSS وJavaScript، مما يضمن تجربة مستخدم سلسة وسهلة الوصول لجمهور عالمي.

لماذا يجب تطبيق الوضع الداكن؟

هناك عدة أسباب مقنعة للنظر في تطبيق الوضع الداكن:

• تحسين تجربة المستخدم: يجد العديد من المستخدمين أن الوضع الداكن أسهل على العينين، مما يقلل من إجهاد العين، خاصة عند التصفح ليلاً أو في البيئات ذات الإضاءة الخافتة. هذا يلبي احتياجات جمهور عالمي له عادات استخدام شاشة وظروف إضاءة متنوعة.
• إمكانية الوصول: يمكن للوضع الداكن تحسين إمكانية الوصول للمستخدمين الذين يعانون من ضعف البصر أو الحساسية للضوء. من خلال توفير خيار عالي التباين، فإنك تجعل موقعك أكثر شمولية.
• عمر البطارية: على الأجهزة ذات شاشات OLED أو AMOLED، يمكن للوضع الداكن أن يقلل من استهلاك الطاقة، مما يطيل عمر البطارية. هذا الأمر مهم بشكل خاص لمستخدمي الهواتف المحمولة في المناطق ذات الوصول المحدود إلى البنية التحتية للشحن.
• اتجاه تصميم حديث: الوضع الداكن هو اتجاه تصميم شائع، وتطبيقه يمكن أن يجعل موقعك يبدو أكثر حداثة وجاذبية. هذا يعزز تصور العلامة التجارية ومشاركة المستخدم.

طرق تطبيق الوضع الداكن

هناك عدة طرق لتطبيق الوضع الداكن، ولكل منها مزاياها وعيوبها. سنستكشف الطرق الأكثر شيوعًا:

• استعلامات الوسائط في CSS (prefers-color-scheme): تكتشف هذه الطريقة تلقائيًا نظام الألوان المفضل للمستخدم بناءً على إعدادات نظام التشغيل الخاص به.
• مفتاح تبديل JavaScript: توفر هذه الطريقة مفتاح تبديل يدوي (مثل زر أو مفتاح) يسمح للمستخدمين بالتبديل بين الوضع الفاتح والداكن.
• الجمع بين استعلامات الوسائط وJavaScript: تجمع هذه الطريقة بين مزايا كلتا الطريقتين، حيث توفر الكشف التلقائي مع السماح للمستخدمين أيضًا بتجاوز تفضيلات النظام.

1. تطبيق الوضع الداكن باستخدام استعلامات الوسائط في CSS

يسمح لك استعلام الوسائط prefers-color-scheme في CSS باكتشاف نظام الألوان المفضل للمستخدم وتطبيق أنماط مختلفة وفقًا لذلك. هذه هي الطريقة الأكثر مباشرة وكفاءة لتطبيق الوضع الداكن للمستخدمين الذين قاموا بالفعل بتعيين تفضيلات نظامهم.

مثال الكود

أضف CSS التالي إلى ورقة الأنماط الخاصة بك:

/* السمة الافتراضية (الفاتحة) */
body {
  background-color: #fff;
  color: #000;
}

/* السمة الداكنة */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* عدّل العناصر الأخرى حسب الحاجة */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

الشرح:

• الكتلة الأولى من CSS تحدد أنماط السمة الافتراضية (الفاتحة).
• الكتلة @media (prefers-color-scheme: dark) تطبق الأنماط فقط عندما يتم ضبط نظام المستخدم على الوضع الداكن.
• داخل كتلة @media، يمكنك تحديد أنماط الوضع الداكن لعناصر مختلفة، مثل خلفية النص ولونه، والعناوين، والروابط.

المزايا

• الكشف التلقائي: يكتشف المتصفح تلقائيًا تفضيلات المستخدم، مما يوفر تجربة سلسة.
• تطبيق بسيط: تتطلب هذه الطريقة الحد الأدنى من الكود وهي سهلة التطبيق.
• الأداء: يتم التعامل مع استعلامات الوسائط في CSS بكفاءة من قبل المتصفح.

العيوب

• تحكم محدود: لا يمكن للمستخدمين التبديل يدويًا بين الوضع الفاتح والداكن داخل موقعك.
• الاعتماد على إعدادات النظام: يعتمد المظهر بالكامل على إعدادات نظام المستخدم، والتي قد لا يكون على دراية بها أو قادرًا على تغييرها.

2. تطبيق الوضع الداكن باستخدام مفتاح تبديل JavaScript

يوفر استخدام مفتاح تبديل JavaScript للمستخدمين مفتاحًا يدويًا للتحكم في سمة الموقع. وهذا يمنح المستخدمين مزيدًا من التحكم ويسمح لهم بتجاوز تفضيلات نظامهم. يعتبر هذا النهج حاسمًا لتلبية احتياجات المستخدمين عبر مختلف الأجهزة والمنصات التي قد لا تدعم أو تكشف باستمرار عن إعدادات الوضع الداكن على مستوى النظام.

هيكل HTML

أولاً، أضف عنصر تبديل إلى ملف HTML الخاص بك:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

ينشئ هذا مفتاح تبديل بسيط باستخدام مربع اختيار وبعض تنسيقات CSS المخصصة.

تنسيق CSS (اختياري)

يمكنك تنسيق مفتاح التبديل باستخدام CSS. إليك مثال:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* منزلقات دائرية */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

كود JavaScript

الآن، أضف كود JavaScript التالي للتعامل مع وظيفة التبديل:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// دالة لتبديل الوضع الداكن
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // تخزين تفضيلات المستخدم في localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// التحقق من localStorage بحثًا عن تفضيلات محفوظة
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// إضافة مستمع حدث إلى مفتاح التبديل
darkModeToggle.addEventListener('change', toggleDarkMode);

الشرح:

• يسترجع الكود عنصر التبديل وعنصر body.
• تقوم دالة toggleDarkMode بتبديل فئة dark-mode على عنصر body.
• يستخدم الكود localStorage لتخزين تفضيلات المستخدم، بحيث تستمر عبر الجلسات.
• يتحقق الكود من localStorage عند تحميل الصفحة لتطبيق التفضيلات المحفوظة.
• يتم إضافة مستمع حدث إلى مفتاح التبديل، بحيث يتم استدعاء دالة toggleDarkMode عند النقر فوق مفتاح التبديل.

تنسيق CSS للوضع الداكن (باستخدام فئة)

حدّث ملف CSS الخاص بك لاستخدام فئة dark-mode لتطبيق أنماط السمة الداكنة:

/* السمة الافتراضية (الفاتحة) */
body {
  background-color: #fff;
  color: #000;
}

/* السمة الداكنة */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

المزايا

• تحكم المستخدم: يمكن للمستخدمين التبديل يدويًا بين الوضع الفاتح والداكن داخل موقعك.
• الاستمرارية: يتم حفظ تفضيلات المستخدم باستخدام localStorage، بحيث تستمر عبر الجلسات.

العيوب

• تطبيق أكثر تعقيدًا: تتطلب هذه الطريقة كودًا أكثر من استخدام استعلامات الوسائط في CSS وحدها.
• الاعتماد على JavaScript: تعتمد وظيفة التبديل على تمكين JavaScript في متصفح المستخدم.

3. الجمع بين استعلامات الوسائط وJavaScript

غالبًا ما يكون النهج الأفضل هو الجمع بين استعلامات الوسائط في CSS ومفتاح تبديل JavaScript. وهذا يوفر أفضل ما في العالمين: الكشف التلقائي عن نظام الألوان المفضل للمستخدم، مع السماح للمستخدمين أيضًا بتجاوز تفضيلات النظام يدويًا. وهذا يلبي احتياجات جمهور أوسع، بما في ذلك أولئك الذين قد لا يكونون على دراية بإعدادات السمة على مستوى النظام أو غير قادرين على تغييرها.

مثال الكود

استخدم نفس HTML و CSS من مثال مفتاح تبديل JavaScript. عدّل كود JavaScript للتحقق من تفضيلات النظام:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// دالة لتبديل الوضع الداكن
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // تخزين تفضيلات المستخدم في localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// التحقق من localStorage بحثًا عن تفضيلات محفوظة، ثم تفضيلات النظام
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// إضافة مستمع حدث إلى مفتاح التبديل
darkModeToggle.addEventListener('change', toggleDarkMode);

الشرح:

• يتحقق الكود أولاً من localStorage بحثًا عن تفضيلات محفوظة.
• إذا لم يتم العثور على تفضيلات في localStorage، فإنه يتحقق مما إذا كان نظام المستخدم يفضل الوضع الداكن باستخدام window.matchMedia.
• إذا كان النظام يفضل الوضع الداكن، تتم إضافة فئة dark-mode إلى العنصر body، ويتم تحديد مفتاح التبديل.

المزايا

• الكشف التلقائي وتحكم المستخدم: يوفر كل من الكشف التلقائي والتحكم اليدوي.
• الاستمرارية: يتم حفظ تفضيلات المستخدم باستخدام localStorage.

العيوب

• أكثر تعقيدًا قليلاً: هذه الطريقة أكثر تعقيدًا بقليل من استخدام أي من الطريقتين بمفردها.
• الاعتماد على JavaScript: يعتمد على تمكين JavaScript.

اعتبارات إمكانية الوصول

عند تطبيق الوضع الداكن، من الضروري مراعاة إمكانية الوصول لضمان بقاء موقعك قابلاً للاستخدام لجميع المستخدمين. تذكر أن مجرد عكس الألوان لا يضمن تلقائيًا إمكانية الوصول. إليك بعض الاعتبارات الرئيسية:

• تباين الألوان: تأكد من وجود تباين كافٍ في الألوان بين النص والخلفية في كل من الوضع الفاتح والداكن. استخدم أدوات مثل WebAIM's Contrast Checker (webaim.org/resources/contrastchecker/) للتحقق من أن مجموعات الألوان الخاصة بك تلبي معايير إمكانية الوصول. هذا مهم بشكل خاص للمستخدمين ذوي الرؤية المنخفضة.
• مؤشرات التركيز: تأكد من أن مؤشرات التركيز مرئية بوضوح في كل من الوضع الفاتح والداكن، حتى يتمكن المستخدمون الذين يتنقلون باستخدام لوحة المفاتيح من رؤية العنصر الذي يتم التركيز عليه حاليًا بسهولة.
• الصور والأيقونات: فكر في كيفية ظهور الصور والأيقونات في الوضع الداكن. قد تحتاج إلى توفير إصدارات بديلة أو استخدام مرشحات CSS لضبط ألوانها لتحقيق رؤية مثالية.
• اختبار المستخدم: اختبر تطبيق الوضع الداكن مع مستخدمين يعانون من إعاقات بصرية مختلفة لتحديد ومعالجة أي مشاكل تتعلق بإمكانية الوصول.

أفضل الممارسات لتطبيق الوضع الداكن

فيما يلي بعض أفضل الممارسات التي يجب اتباعها عند تطبيق الوضع الداكن على موقعك:

• استخدام متغيرات CSS (الخصائص المخصصة): تسمح لك متغيرات CSS بتحديد الألوان والأنماط الأخرى في موقع مركزي، مما يسهل إدارة وتحديث السمة الخاصة بك.
• الاختبار الشامل: اختبر تطبيق الوضع الداكن على أجهزة ومتصفحات مختلفة لضمان الاتساق.
• توفير مفتاح تبديل واضح: اجعل مفتاح التبديل سهل العثور عليه والاستخدام. استخدم أيقونة واضحة وبديهية للإشارة إلى وظيفته.
• مراعاة تفضيلات المستخدم: احترم تفضيلات المستخدم واحفظها باستخدام localStorage أو ملفات تعريف الارتباط.
• الحفاظ على الاتساق: تأكد من أن تطبيق الوضع الداكن متسق في جميع أنحاء موقعك.

مثال: استخدام متغيرات CSS لتنسيق السمات

تسهّل متغيرات CSS التبديل بين سمات الوضع الفاتح والداكن. حدد المتغيرات في الفئة الزائفة :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

الآن، عند إضافة فئة dark-mode إلى العنصر body، يتم تحديث متغيرات CSS، ويتم تطبيق الأنماط تلقائيًا.

الخاتمة

يمكن أن يؤدي تطبيق الوضع الداكن إلى تحسين تجربة المستخدم لموقعك بشكل كبير، وتحسين إمكانية الوصول، وحتى توفير عمر البطارية. باتباع التقنيات وأفضل الممارسات الموضحة في هذا الدليل، يمكنك إنشاء تجربة وضع داكن سلسة وممتعة للمستخدمين في جميع أنحاء العالم.

تذكر إعطاء الأولوية لإمكانية الوصول واختبار تطبيقك بدقة لضمان بقاء موقعك قابلاً للاستخدام لجميع المستخدمين، بغض النظر عن تفضيلاتهم أو قدراتهم البصرية.

من خلال تطبيق الوضع الداكن بشكل مدروس، فأنت لا تتبع اتجاهًا فحسب، بل تنشئ أيضًا تجربة ويب أكثر شمولية وسهولة في الاستخدام لجمهور عالمي. يمكن أن يفيد هذا التفاني في تجربة المستخدم بشكل كبير الأداء العام لموقعك وجاذبيته.