تفعيل زر تبديل الوضع الداكن في Tailwind

بشكل افتراضي، يقوم Tailwind بتوليد ملفات CSS تتبع إعدادات النظام تلقائياً. إذا كنت ترغب في تشغيل زر "تبديل" (Toggle) يعمل يدوياً، عليك اتباع هذه الخطوات لضبط الإعدادات.

1. تعديل إعدادات Tailwind

افتح ملف app.css وقم بتعريف المتغير المخصص للوضع الداكن ليعتمد على الـ Class بدلاً من الـ Media Query:

@tailwind utilities;

/* تعريف مخصص للوضع الداكن القائم على الـ Class */
@custom-variant dark (&:where(.dark,.dark *));

@theme {
  --darkMode: class;
  /* بقية إعدادات الثيم الخاصة بك */
}

2. إنشاء زر التبديل (UI)

أضف زر التبديل في أي مكان داخل ملف HTML الخاص بك:

<button onclick="toggleTheme()" id="theme-btn" class="btn-primary">
    تبديل الوضع
</button>

3. إضافة كود الـ JavaScript

هذا الكود يقوم بتبديل الـ Class في عنصر الـ html وحفظ الاختيار في المتصفح (LocalStorage):

function toggleTheme() {
  document.documentElement.classList.toggle("dark");

  // حفظ التفضيلات
  if (document.documentElement.classList.contains("dark")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
}

// تطبيق التفضيلات عند تحميل الصفحة
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}

4. إعادة بناء الملفات (Build)

قم بتشغيل أمر البناء لتوليد ملفات CSS الجديدة التي تدعم الـ Class المخصص:

npm run build

5. ملاحظات هامة للتشغيل