يا! لذا، إذا كنت مثلي وتحب الوضع المظلم بالكامل، فربما فكرت في إضافته إلى موقع الويب الخاص بك. من السهل جدًا إعداده باستخدام القليل من CSS وJavaScript. وإليك كيف فعلت ذلك.

الخطوة 1: إعداد HTML

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

Toggle Dark Mode

سيكون هذا الزر بمثابة المشغل لتبديل الأوضاع.

الخطوة 2: إضافة CSS للأوضاع الفاتحة والداكنة

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

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

إليك ما يحدث:

• وضع الضوء (افتراضي): الجسم ذو خلفية بيضاء ونص أسود. أضفت انتقالًا لجعل التغيير سلسًا عند التبديل بين الأوضاع.
• الوضع الداكن: تقوم فئة الوضع الداكن بتغيير الخلفية إلى اللون الرمادي الداكن والنص إلى اللون الأبيض.

الخطوة 3: التبديل بين الأوضاع باستخدام JavaScript

الآن يأتي الجزء الذي نجعل فيه الزر يفعل شيئًا ما. هذا الجزء من جافا سكريبت سيعمل على تبديل فئة .dark-mode على النص كلما تم النقر على الزر.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

إليكم الشرح:

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

الخطوة 4: تحميل تفضيلات المستخدم عند تحميل الصفحة

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

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

إذا كنت تستخدم React، فإن العملية متشابهة إلى حد كبير، ولكنك ستتعامل مع الأشياء داخل مكوناتك. وإليك كيفية القيام بذلك:

1. إعداد الحالة وفئة CSS للوضع الداكن:

استخدم useState الخاص بـ React لإدارة حالة الوضع المظلم، وتطبيق الفئة المناسبة على العنصر الجذر الخاص بك:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

في هذا المثال:

• تحدد حالة الوضع المظلم ما إذا كان الوضع المظلم نشطًا أم لا.
• تقوم وظيفة تبديل DarkMode بالتبديل بين تشغيل وإيقاف الوضع المظلم.

1. CSS للوضع الداكن:

أضف فئة .dark-mode إلى CSS الخاص بك، تمامًا كما كان من قبل:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. التخزين المحلي:

إذا كنت تريد أن يستمر تفضيل السمة، يمكنك إضافة هذا التعديل الصغير:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

إليك ما يحدث:

• الحالة الأولية: يتم تعيين الحالة الأولية لـ darkMode بناءً على القيمة المخزنة في localStorage.
• خطاف التأثير: يحفظ خطاف useEffect تفضيل السمة الحالي كلما تغير الوضع المظلم.

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