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

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

1. تفضيلات المستخدم: يفضل بعض المستخدمين الوضع المظلم للجماليات أو تقليل إجهاد العين، خاصة في البيئات منخفضة الإضاءة.

2. إمكانية الوصول: تحسين إمكانية الوصول من خلال تقديم موضوع يمكن أن يساعد المستخدمين ضعاف البصر.

3. توفير طاقة البطارية: على شاشات OLED، يمكن للوضع المظلم توفير عمر البطارية.

إعداد هيكل HTML

ابدأ بإنشاء بنية HTML بسيطة. سنحتاج إلى زر للتبديل بين الوضعين الداكن والفاتح.

    
    
    
    


    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

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

بعد ذلك، سنحدد أنماطنا لكل من الوضعين الداكن والفاتح. سنستخدم متغيرات CSS لتسهيل التبديل بين السمات.

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

إضافة وظائف جافا سكريبت

الآن، سنضيف JavaScript للتعامل مع تبديل السمة. سنقوم أيضًا بحفظ تفضيلات المستخدم في localStorage بحيث يستمر اختياره عبر الجلسات.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

توضيح

1. متغيرات CSS: نستخدم متغيرات CSS لتحديد الألوان لكلا الوضعين، مما يسهل التبديل بينهما.

2. JavaScript: نضيف مستمعًا للحدث إلى الزر لتبديل فئة الوضع المظلم على عنصر النص. نقوم أيضًا بتحديث نص الزر بناءً على الوضع الحالي وحفظ الوضع في التخزين المحلي.

3. السمة الدائمة: عند تحميل الصفحة، نتحقق من التخزين المحلي بحثًا عن تفضيلات المستخدم ونطبق السمة المناسبة.

خاتمة

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

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

تعليمات سعيدة!