🌙 Dark Mode با یک کلاس روی <html>
خیلی وقت‌ها برای پیاده‌سازی Dark Mode کلی if/else توی JS و کلی selector توی CSS می‌نویسیم، درحالی‌که می‌شه همه‌چیز رو تمیز و مقیاس‌پذیر با یک کلاس روی ریشه‌ی سند مدیریت کرد.
✅ ایده:
فقط روی تگ
🔧 نمونه‌ی ساده:
و در JS فقط یک بار toggle انجام می‌شه:
✨ نکات کاربردی:
• با CSS Variable فقط یک‌بار رنگ‌ها رو تعریف می‌کنی و هرجا لازم بود از
• اگر تعداد رنگ‌ها زیاد شد، هنوز هم فقط در دو بلاک
• می‌شه این الگو رو با
📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties
امتحان این الگو روی یک صفحه‌ی ساده، سریع‌ترین راه برای مرتب کردن تم پروژه‌های بعدی است و جلو کلی refactor دردناک رو می‌گیره.
🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web
👤 Developix
💎 Channel: @DevelopixWeb
خیلی وقت‌ها برای پیاده‌سازی Dark Mode کلی if/else توی JS و کلی selector توی CSS می‌نویسیم، درحالی‌که می‌شه همه‌چیز رو تمیز و مقیاس‌پذیر با یک کلاس روی ریشه‌ی سند مدیریت کرد.
✅ ایده:
فقط روی تگ
<html> یک کلاس مثل .dark ست می‌شه و بقیه‌ی استایل‌ها بر اساس همون کلاس عوض می‌شن. این الگو توی خیلی از Design Systemها و کتابخونه‌ها استفاده می‌شه.🔧 نمونه‌ی ساده:
/* حالت پیش‌فرض (Light) */
:root {
--bg: #ffffff;
--fg: #111827;
}
/* وقتی Dark Mode فعاله */
html.dark {
--bg: #0f172a;
--fg: #e5e7eb;
}
body {
background-color: var(--bg);
color: var(--fg);
transition: background-color 150ms ease, color 150ms ease;
}
و در JS فقط یک بار toggle انجام می‌شه:
const root = document.documentElement;
function toggleTheme() {
root.classList.toggle('dark');
}
✨ نکات کاربردی:
• با CSS Variable فقط یک‌بار رنگ‌ها رو تعریف می‌کنی و هرجا لازم بود از
var(--bg) و var(--fg) استفاده می‌کنی.• اگر تعداد رنگ‌ها زیاد شد، هنوز هم فقط در دو بلاک
:root و html.dark ویرایش می‌شن و باقی کامپوننت‌ها دست نمی‌خورن.• می‌شه این الگو رو با
prefers-color-scheme هم ترکیب کرد تا بر اساس تم سیستم‌عامل، کلاس dark رو ست کنی.📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties
امتحان این الگو روی یک صفحه‌ی ساده، سریع‌ترین راه برای مرتب کردن تم پروژه‌های بعدی است و جلو کلی refactor دردناک رو می‌گیره.
🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web
👤 Developix
💎 Channel: @DevelopixWeb
❤5