وظيفة Light-Dark في CSS: التكيف التلقائي للمظهر لشبكة ويب عالمية

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

لماذا يجب تنفيذ المظاهر الفاتحة والداكنة التلقائية؟

هناك عدة أسباب قوية لدمج التكيف التلقائي للمظهر في مشاريع الويب الخاصة بك:

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

كيفية تنفيذ التكيف التلقائي للمظهر باستخدام CSS

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

الخطوة 1: تحديد الخصائص المخصصة (متغيرات CSS)

ابدأ بتحديد الخصائص المخصصة (متغيرات CSS) لتخزين قيم الألوان للمظهرين الفاتح والداكن. هذا يسهل التبديل بين المظاهر بمجرد تحديث قيم المتغيرات.

:root {
  --background-color: #ffffff; /* خلفية المظهر الفاتح */
  --text-color: #000000; /* نص المظهر الفاتح */
  --link-color: #007bff; /* رابط المظهر الفاتح */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* خلفية المظهر الداكن */
    --text-color: #ffffff; /* نص المظهر الداكن */
    --link-color: #66b3ff; /* رابط المظهر الداكن */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

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

الخطوة 2: تطبيق الخصائص المخصصة على أنماطك

بعد ذلك، طبق هذه الخصائص المخصصة على أنماط CSS الخاصة بك للتحكم في مظهر عناصر موقعك.

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* انتقال سلس */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

هنا، نستخدم الدالة var() للوصول إلى قيم خصائصنا المخصصة. لقد أضفنا أيضًا خاصية transition إلى عنصر body لإنشاء انتقال سلس بين المظاهر.

الخطوة 3: الاختبار والتحسين

اختبر تنفيذك بدقة عبر مختلف المتصفحات وأنظمة التشغيل. المتصفحات الحديثة مثل Chrome و Firefox و Safari و Edge تدعم بشكل كامل استعلام الوسائط prefers-color-scheme. يمكنك التبديل بين الوضعين الفاتح والداكن في إعدادات نظام التشغيل الخاص بك لرؤية التغييرات تنعكس على موقعك.

تقنيات واعتبارات متقدمة

توفير مفتاح تبديل يدوي للمظهر

بينما يعد التكيف التلقائي للمظهر نقطة انطلاق رائعة، قد يفضل بعض المستخدمين تجاوز إعدادات نظامهم يدويًا. يمكنك توفير مفتاح تبديل يدوي للمظهر باستخدام JavaScript والتخزين المحلي (local storage).

HTML:

<button id="theme-toggle">Toggle Theme</button>

JavaScript:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // الوضع الافتراضي هو التلقائي

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// تطبيق المظهر الأولي عند تحميل الصفحة
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // إذا تم التعيين على تلقائي، اسمح لـ prefers-color-scheme بالتقرير
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: أضف CSS التالي مع CSS السابق. لاحظ التجاوز اليدوي:

body.light-theme {
  --background-color: #ffffff; /* خلفية المظهر الفاتح */
  --text-color: #000000; /* نص المظهر الفاتح */
  --link-color: #007bff; /* رابط المظهر الفاتح */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* خلفية المظهر الداكن */
  --text-color: #ffffff; /* نص المظهر الداكن */
  --link-color: #66b3ff; /* رابط المظهر الداكن */
  --button-background-color: #333;
  --button-text-color: #fff;
}

يضيف هذا المقتطف البرمجي زرًا يسمح للمستخدمين بالتبديل بين المظاهر الفاتحة والداكنة والتلقائية. يتم تخزين المظهر المختار في التخزين المحلي بحيث يستمر عبر عمليات تحميل الصفحة.

التعامل مع الصور وملفات SVG

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

img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

يعرض هذا المقتطف البرمجي صورة واحدة (ذات الفئة light-mode) في الوضع الفاتح وصورة مختلفة (ذات الفئة dark-mode) في الوضع الداكن.

اعتبارات لوحة الألوان للجمهور الدولي

عند اختيار لوحات الألوان لمظهرك الفاتح والداكن، كن على دراية بالارتباطات الثقافية واعتبارات إمكانية الوصول. إليك بعض الإرشادات العامة:

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

اعتبارات الأداء

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

فيما يلي بعض أفضل الممارسات لتحسين الأداء:

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

أفضل ممارسات إمكانية الوصول

تأكد من أن مظاهرك الفاتحة والداكنة تفي بإرشادات إمكانية الوصول، مثل WCAG (إرشادات الوصول إلى محتوى الويب). يشمل ذلك توفير تباين ألوان كافٍ، واستخدام HTML الدلالي، والتأكد من أن جميع العناصر التفاعلية يمكن الوصول إليها عبر لوحة المفاتيح.

إليك بعض أفضل ممارسات إمكانية الوصول المحددة التي يجب اتباعها:

• تباين ألوان كافٍ: تأكد من أن نسبة التباين بين ألوان النص والخلفية تفي بمعايير WCAG 2.1 AA (4.5:1 للنص العادي، 3:1 للنص الكبير). استخدم أدوات مثل مدقق التباين من WebAIM للتحقق من نسب التباين.
• HTML الدلالي: استخدم عناصر HTML الدلالية (مثل <header>, <nav>, <article>, <aside>, <footer>) لهيكلة المحتوى الخاص بك بشكل منطقي. يساعد هذا قارئات الشاشة والتقنيات المساعدة الأخرى على فهم المحتوى والتنقل في الصفحة بفعالية.
• إمكانية الوصول عبر لوحة المفاتيح: تأكد من أن جميع العناصر التفاعلية (مثل الروابط والأزرار وحقول النماذج) يمكن الوصول إليها عبر لوحة المفاتيح. استخدم السمة tabindex للتحكم في ترتيب التركيز وتوفير إشارات بصرية للإشارة إلى العنصر الذي لديه التركيز.
• سمات ARIA: استخدم سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) لتوفير معلومات إضافية حول بنية ووظائف تطبيق الويب الخاص بك للتقنيات المساعدة. على سبيل المثال، استخدم aria-label لتوفير تسمية وصفية لعنصر، أو aria-hidden لإخفاء عنصر عن قارئات الشاشة.
• الاختبار باستخدام التقنيات المساعدة: اختبر موقعك باستخدام قارئات الشاشة والتقنيات المساعدة الأخرى لتحديد مشكلات إمكانية الوصول المحتملة. استخدم أدوات مثل NVDA (الوصول إلى سطح المكتب غير المرئي) أو VoiceOver لتجربة موقعك كمستخدم يعاني من إعاقة بصرية.
• توفير نص بديل للصور: استخدم السمة alt لتوفير نص بديل وصفي لجميع الصور. سيتم عرض هذا النص إذا لم يتم تحميل الصورة، وسيتم قراءته أيضًا بواسطة قارئات الشاشة.

أمثلة عبر مناطق مختلفة

خذ بعين الاعتبار هذه الأمثلة على كيفية تصميم المظاهر الفاتحة والداكنة لتناسب الجماهير العالمية المتنوعة:

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

الخاتمة

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

من خلال تبني هذه التقنيات، فإنك تظهر التزامًا بمبادئ تصميم الويب الحديثة وتلبي الاحتياجات المتنوعة لجمهورك الدولي، مما يجعل موقعك مساحة ترحيبية ومريحة للجميع.