© Khmer Angkor Academy - sophearithput168

Khmer Angkor Academy Logo

Dark Mode

Dark Mode ក្នុង Tailwind

ប្រើ dark: prefix ដើម្បីធ្វើ dark mode។ Dark mode គឺជា theme ដែលប្រើពណ៌ងងឹត ដើម្បីកាត់បន្ថយពន្លឺអេក្រង់ និងការពារភ្នែក។

🌓 អ្វីទៅជា Dark Mode?

Dark Mode គឺជាការបង្ហាញ interface ជា​មួយ background ងងឹត និង text ស្រាល។ វាផ្តល់អត្ថប្រយោជន៍ជាច្រើន:

អត្ថប្រយោជន៍ ពិពណ៌នា
👁️ Eye Comfort កាត់បន្ថយពន្លឺខ្លាំងពីអេក្រង់ ពិសេសនៅពេលយប់
🔋 Battery Save សន្សំថ្មលើអេក្រង់ OLED និង AMOLED (pixel ងងឹតប្រើថាមពលតិច)
🌙 Low Light ងាយស្រួលមើលក្នុងបរិយាកាសងងឹត (ការងារយប់, កន្លែងងងឹត)
😎 Modern Look រូបរាងទំនើប និងទាក់ទាញ (trendy design)
♿ Accessibility ជួយអ្នកមានបញ្ហាភ្នែកមួយចំនួន (photophobia)

⚙️ Dark Mode Configuration Strategies

Tailwind មាន configuration 2 យ៉ាង:

Strategy Config How It Works Use Case
media darkMode: 'media' ប្រើ OS preference (prefers-color-scheme) ចង់ follow user's system setting (automatic)
class darkMode: 'class' ប្រើ .dark class នៅលើ <html> ចង់ឲ្យ user toggle manually (custom control)
selector darkMode: '[data-theme="dark"]' ប្រើ custom selector ចង់ប្រើ data-attribute ឬ custom class

🎨 Dark Mode Color Strategy

ពណ៌ត្រូវប្រើខុសគ្នានៅ light និង dark mode:

Element Type Light Mode Dark Mode Tailwind Class
Background bg-white / bg-gray-50 bg-gray-900 / bg-gray-800 bg-white dark:bg-gray-900
Text Primary text-gray-900 / text-black text-gray-100 / text-white text-gray-900 dark:text-white
Text Secondary text-gray-600 text-gray-400 / text-gray-300 text-gray-600 dark:text-gray-400
Borders border-gray-300 / border-gray-200 border-gray-700 / border-gray-600 border-gray-300 dark:border-gray-700
Shadows shadow-md / shadow-lg shadow-xl / shadow-2xl shadow-lg dark:shadow-2xl
Cards/Surfaces bg-white bg-gray-800 / bg-gray-850 bg-white dark:bg-gray-800

💡 Dark Mode Implementation Guide

Step Action Example Code
1. Configure Set darkMode in tailwind.config.js darkMode: 'class'
2. Add Classes ប្រើ dark: prefix bg-white dark:bg-gray-900
3. Toggle Class Add/remove .dark on <html> document.documentElement.classList.toggle('dark')
4. Save Preference រក្សាទុកក្នុង localStorage localStorage.setItem('darkMode', 'true')
5. Load on Init Load preference on page load if (localStorage.getItem('darkMode'))

🔧 JavaScript Toggle Implementation

// Dark mode toggle function
function toggleDarkMode() {
  const html = document.documentElement;
  const isDark = html.classList.toggle('dark');
  
  // Save preference
  localStorage.setItem('darkMode', isDark);
  
  // Update button icon
  updateIcon(isDark);
}

// Load saved preference on page load
window.addEventListener('DOMContentLoaded', () => {
  const isDark = localStorage.getItem('darkMode') === 'true';
  
  if (isDark) {
    document.documentElement.classList.add('dark');
  }
  
  updateIcon(isDark);
});

// Detect OS preference (for 'media' strategy)
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

🎯 Common Dark Mode Patterns

Component Light Classes Dark Classes
Page Background bg-gray-50 dark:bg-gray-900
Card bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700
Heading text-gray-900 dark:text-white
Body Text text-gray-600 dark:text-gray-300
Input bg-white border-gray-300 dark:bg-gray-700 dark:border-gray-600
Button Primary bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
Button Secondary bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200

⚠️ Common Dark Mode Mistakes

❌ Mistake Why It's Wrong ✅ Solution
Pure black (#000) background Too harsh, causes eye strain Use gray-900 (#111827) instead
Pure white text on dark Too much contrast, glaring Use gray-100 or gray-200 for body text
Same shadow intensity Shadows invisible in dark mode Increase shadow in dark: dark:shadow-2xl
Forgetting borders Elements blend together Add dark:border-gray-700
Not testing colors Poor contrast in one mode Test both modes, use contrast checker
Inverting all colors Brand colors look wrong Adjust shades, not invert: blue-500 → blue-600

♿ Dark Mode Accessibility

Guideline Recommendation
Contrast Ratio Maintain WCAG AA (4.5:1) in both modes
Focus Indicators Visible in both modes: focus:ring-blue-500 dark:focus:ring-blue-400
Icons & Graphics Use appropriate colors or invert filters
Toggle Button Clear icon (🌙/☀️) + accessible label
User Preference Respect prefers-color-scheme or provide toggle

✅ Dark Mode Best Practices

✅ DO ❌ DON'T
Use gray-900 for dark backgrounds (not pure black) Use #000000 pure black
Test thoroughly in both modes Assume colors work in both modes
Save user preference in localStorage Force users to toggle every visit
Add smooth transitions: transition-colors duration-300 Instant jarring color changes
Adjust image brightness in dark mode Use same bright images
Provide clear toggle button/icon Hide dark mode option
Use semantic color names (bg-primary) Hardcode specific shades everywhere

🎨 Color Adjustment Guidelines

Color Type Light Mode Shade Dark Mode Shade Adjustment
Primary Color blue-500 blue-400 or blue-600 Lighten or darken by 100
Success green-600 green-400 Lighten by 200
Warning yellow-500 yellow-400 Lighten by 100
Danger red-600 red-400 Lighten by 200

Dark Mode Toggle

ឧទាហរណ៍ complete dark mode implementation ជាមួយ toggle button, localStorage persistence, និង smooth transitions។

មេរៀនមុន
Hover & States
បញ្ចប់មេរៀន