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

1. كيف يعمل الوضع الداكن في Tailwind

يقدم Tailwind طريقة بسيطة لتنفيذ الوضع المظلم من خلال المتغير المظلم. افتراضيًا، يتحقق من إعدادات نظام المستخدم للوضع المظلم ويطبق الأنماط المقابلة.

ضبط الوضع الداكن في Tailwind:

في ملف tailwind.config.js، قم بتمكين الوضع المظلم عن طريق تعيينه على الوسائط (تفضيل النظام) أو الفئة (التبديل اليدوي):

module.exports = {
  darkMode: 'media', // or 'class'
}

• الوسائط: يقوم بتنشيط الوضع المظلم بناءً على إعدادات نظام التشغيل الخاصة بالمستخدم.
• الفئة: تتيح لك تبديل الوضع المظلم يدويًا عن طريق إضافة فئة داكنة.

2. التصميم للوضع الداكن

بمجرد تمكين الوضع المظلم، يمكنك استخدام المتغير المظلم لتطبيق الأنماط خصيصًا للوضع المظلم.

مثال:

    This is a dark mode toggle example

• ينطبق bg-white وtext-black على الوضع الفاتح.
• داكن:bg-gray-800 وداكن:نص-أبيض يتم تطبيقه عندما يكون الوضع الداكن نشطًا.

تسمح لك هذه المرونة بتصميم مكوناتك بشكل مختلف للوضعين الداكن والفاتح.

3. الوضع الداكن مع إستراتيجية فئة Tailwind

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

مثال باستخدام JavaScript:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

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

4. استخدام الوضع الداكن لعناصر محددة

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

مثال:

    

        This section is in dark mode, while the outer section remains light.
    

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

5. تخصيص ألوان الوضع الداكن

يمكنك أيضًا تخصيص ألوان الوضع الداكن في ملف tailwind.config.js الخاص بك عن طريق توسيع لوحة الألوان.

مثال:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

الآن، يمكنك استخدام ألوان الوضع الداكن المخصصة مثل هذا:

    Custom Dark Mode Colors

خاتمة

يجعل Tailwind CSS تنفيذ الوضع المظلم أمرًا سهلاً، سواء من خلال إعدادات النظام أو التبديل اليدوي. باستخدام المتغير الداكن، يمكنك إنشاء تصميم جذاب بصريًا يتكيف بسلاسة مع تفضيلات المستخدم المختلفة.

تابعني على LinkedIn- رضوي حسن
زيارة موقع الويب الخاص بي-ridoyweb.com
قراءة التالي-
أفضل الممارسات لكتابة CSS