كيفية تعتيم صفحة باستخدام Javascript

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

ستتعلم في هذه المقالة كيفية إنشاء الوضع المظلم على الصفحة باستخدام JavaScript وHTML وCSS وتقنيات الويب الحديثة.

مقدمة إلى الوضع المظلم

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

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

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

لماذا اعتماد الوضع المظلم؟

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

مزايا الوضع المظلم

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

النص الموجود على خلفية داكنة يقلل من الجهد البصري ويزيد من تفاعل المستخدم.

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

ومن المزايا الهامة الأخرى توفير طاقة البطارية على الأجهزة المحمولة المزودة بشاشات OLED، لأنها تستهلك طاقة أقل في الوضع المظلم.

تجعل هذه المدخرات الوضع المظلم خيارًا ذكيًا للمستخدمين والمطورين.

مزايا الوضع الداكن:

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

استخدام متغيرات CSS والتخزين المحلي

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

O localStorage هي أداة قوية لحفظ البيانات في المتصفح. فهو يسمح بحفظ تفضيلات المستخدمين، مثل اختيار الموضوع، وتطبيقها تلقائيًا على الزيارات المستقبلية للموقع.

البنية الأساسية لـ HTML

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

العناصر الأساسية:

• : زر للتبديل بين الوضع الفاتح والداكن.
• <h1>: العنوان الرئيسي للصفحة.
• <p>: فقرات من النص تسهل قراءتها.
• <div>: أقسام لتجميع المحتوى وتصميمه.

التصميم باستخدام CSS

يعد اختيار الألوان المناسبة أمرًا أساسيًا لجعل الوضع المظلم ممتعًا. استخدام فئات مثل .ضوء e .مظلم يسهل التبديل بين المواضيع.

مثال اللون:

• النص الرئيسي: #000000 في المظهر الفاتح، #FFFFFF في المظهر الداكن.
• قاع: #FFFFFF في المظهر الفاتح، #121212 في المظهر الداكن.
• الروابط: #007BFF في المظهر الفاتح، #82B1FF في المظهر الداكن.

تنفيذ الوضع المظلم باستخدام JavaScript

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

سيكون الكود الأساسي لتنفيذ الوضع المظلم هو:

إذا (localStorage.getItem('darkMode') === 'ممكّن') {
    document.body.classList.add('الوضع المظلم');
} آخر {
    document.body.classList.remove('الوضع المظلم');
}

التعامل مع الأحداث وفئات CSS

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

الخطوات الأساسية:

1. اختر زر تغيير الموضوع.
2. أضف مستمع الأحداث لاكتشاف النقرات.
3. تغيير فئة الموضوع على الصفحة.

يعد التعامل مع الفئات في JavaScript أمرًا أساسيًا لتنفيذ الوضع المظلم. استخدام classList، يمكنك التبديل بين المواضيع بسهولة.

document.body.classList.toggle('dark');

اختبار وتحسين التنفيذ

من الضروري اختبار تطبيق الوضع المظلم لديك للتأكد من أن كل شيء يعمل بشكل صحيح. تأكد من تطبيق السمة التي حددها المستخدم بشكل صحيح عند تحميل الصفحة وأن تبديل السمات يتم بسلاسة.

التحسينات المحتملة:

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

فوائد التحسينات:

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

الخاتمة

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

باستخدام HTML وCSS وJavaScript، يمكنك تحويل تجربة التصفح، وتقديم تصميم أكثر مرونة يتكيف مع المستقبل الرقمي.