مقدمة

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

تشمل فوائد الوضع المظلم ما يلي:

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

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

إعداد المشروع

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

تنفيذ أنماط الوضع الداكن

اختيار الألوان

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

المتغيرات المخصصة

نستخدم بعد ذلك متغيرات CSS لإنشاء فئة داكنة وفاتحة على الجسم باستخدام تلك المتغيرات.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

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

ألوان العناصر الديناميكية

نستخدم الدالة var() CSS لإدراج قيم متغيرات CSS. بهذه الطريقة، يمكننا تغيير اللون ديناميكيًا وتحديث متغير واحد ليعكس التغييرات عبر المستند بأكمله، بدلاً من تغيير كل متغير يدويًا.

إليك مثال لعنصر التنقل وأفرعه:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

تبديل الوضع الفاتح/المظلم باستخدام JavaScript

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

حدد وظيفة ChangeTheme () التي تقوم بتبديل فئة النص:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

والآن يمكن للمستخدمين تغيير موضوع الموقع من خلال النقر على الزر.

يمكنك رؤية كود البرنامج التعليمي في CodePen أدناه

الخطوات التالية

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

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

إضافة نظام الألوان: داكن؛ الخاصية عندما تكون في المظهر المظلم يمكن أن تضمن أيضًا أن بعض العناصر، التي يصعب تصميمها، سيتم تغيير أنماطها بواسطة المتصفح.

body.dark {
  color-scheme: dark;
}

خاتمة

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

شارك تطبيقاتك أو اطرح الأسئلة في التعليقات أدناه.