بناء مفتاح الوضع الليلي/النهاري مع الحفظ التلقائي

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.


بناء مفتاح الوضع الليلي/النهاري مع الحفظ التلقائي

في هذا الدرس العملي، سنقوم بتطبيق ميزة تبديل الوضع الليلي/النهاري خطوة بخطوة، مع ضمان حفظ تفضيل المستخدم في المتصفح حتى بعد تحديث الصفحة.

المتطلبات الأساسية

  • معرفة أساسية بـ HTML، CSS، و JavaScript.
  • محرر نصوص (مثل VS Code).
  • متصفح ويب حديث.

الخطوات

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

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

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تبديل الوضع الليلي/النهاري</title>
    <link rel="stylesheet" href="style.css"> <!-- سنضيف ملف CSS هنا -->
</head>
<body>
    <header>
        <h1>مرحبًا بك في موقعنا!</h1>
        <button id="theme-toggle">تبديل الوضع</button>
    </header>
    <main>
        <p>هذه فقرة نصية لتجربة الوضع الليلي والنهاري. يمكننا رؤية كيف تتغير الألوان والخلفية.</p>
        <p>المحتوى هنا سيتأثر بتغيير الوضع.</p>
    </main>

    <script src="script.js"></script> <!-- سنضيف ملف JavaScript هنا -->
</body>
</html>

الخطوة 2: إضافة أنماط CSS

الآن، سنقوم بإنشاء ملف style.css وتحديد الأنماط الافتراضية والأنماط الخاصة بالوضع الليلي.

/* الأنماط الافتراضية (الوضع النهاري) */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s ease, color 0.3s ease; /* للانتقال السلس */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-size: 16px;
}

/* أنماط الوضع الليلي */
body.dark-mode {
    background-color: #282c34;
    color: #f4f4f4;
}

body.dark-mode button {
    background-color: #61dafb;
    color: #282c34;
}

الخطوة 3: كتابة كود JavaScript

سنقوم بإنشاء ملف script.js وإضافة الدالة المسؤولة عن تبديل الوضع، بالإضافة إلى منطق حفظ التفضيلات وتحميلها.

// دالة لتبديل الوضع الليلي وحفظ الخيار في المتصفح
function toggleDarkMode() {
  const body = document.body;
  body.classList.toggle('dark-mode');

  // حفظ تفضيل المستخدم في LocalStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
    console.log('تم تفعيل الوضع الليلي 🌙');
  } else {
    localStorage.setItem('theme', 'light');
    console.log('تم تفعيل الوضع النهاري ☀️');
  }
}

// 1. استدعاء الدالة عند النقر على الزر
const themeToggleButton = document.getElementById('theme-toggle');
if (themeToggleButton) {
  themeToggleButton.addEventListener('click', toggleDarkMode);
}

// 2. التحقق من التفضيل المحفوظ عند تحميل الصفحة
// هذا الجزء يضمن أن الوضع المفضل للمستخدم يتم تحميله تلقائياً
document.addEventListener('DOMContentLoaded', () => {
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-mode');
        console.log('تم تحميل الوضع الليلي من التفضيلات المحفوظة 🌙');
    } else {
        console.log('تم تحميل الوضع النهاري من التفضيلات المحفوظة ☀️');
    }
});

الخطوة 4: التجربة

افتح ملف index.html في متصفحك:

  1. سترى الصفحة بالوضع النهاري افتراضيًا (إذا لم يكن هناك تفضيل محفوظ).
  2. انقر على زر "تبديل الوضع". يجب أن تتغير الألوان إلى الوضع الليلي.
  3. أعد تحميل الصفحة. يجب أن تظل الصفحة في الوضع الليلي (بفضل localStorage).
  4. انقر على الزر مرة أخرى للعودة إلى الوضع النهاري. أعد التحميل، وسترى أنها تظل في الوضع النهاري.
  5. افتح وحدة تحكم المطور (F12) لمشاهدة رسائل console.log.

الخلاصة

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