Chapter 15 — Dark/Light Rejim Qurish

---

15.1 dark: Variant

Example

index.html
HTMLNusxalash
01<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded-xl">
02  Mavzuga qarab rang o'zgaradi
03</div>

How It Works

script.js
JavaScriptNusxalash
01// tailwind.config.js
02export default { darkMode: 'class' }

15.2 Rang Strategiyasi

⚠️ Common Mistake
Faqat fon rangiga dark: qo'shib, matn rangini unutish — natijada dark mode'da matn o'qilmay qoladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta <div>ga light/dark variantlarini qo'shing: bg-white dark:bg-gray-900 text-black dark:text-white.

🟡 Exercise 2 — Medium

Task: To'liq Dark Mode Card yarating (fon, matn, chegara, tugma — barchasi dark: bilan).

🔴 Exercise 3 — Hard

Task: Dark/Light almashtiruvchi tugma yarating (document.documentElement.classList.toggle('dark') bilan).

---

🐛 Debugging Challenge

script.js
JavaScriptNusxalash
01// tailwind.config.js
02export default { darkMode: 'media' }

index.html
HTMLNusxalash
01<button onclick="document.documentElement.classList.toggle('dark')">Toggle</button>

Your Task: Bu toggle tugma nega ishlamayapti?

<details> <summary>Solution</summary> `darkMode: 'media'` bilan `dark` klassi qo'lda qo'shilishi e'tiborga olinmaydi — bu rejim faqat OS `prefers-color-scheme` sozlamasiga qaraydi. Toggle ishlashi uchun `darkMode: 'class'` ga o'zgartirish kerak. </details>

---

📌 Chapter Summary

darkMode: 'class' — foydalanuvchi boshqaradigan dark mode uchun tavsiya etiladi. Har bir rang klassiga (fon, matn, chegara) mos dark: jufti kerak.

🎯 Key Takeaways

• dark: variant har doim asosiy klass bilan JUFT keladi
• localStorage orqali foydalanuvchi tanlovini saqlash mumkin
• Sof qora o'rniga yumshoqroq to'q ranglar tavsiya etiladi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Sozlama:  darkMode: 'class'
02Variant:  dark:bg-*, dark:text-*, dark:border-*
03Toggle:   document.documentElement.classList.toggle('dark')

---