🎨 تم روشن/تاریک فقط با CSS Variables
خیلی وقت‌ها برای پیاده‌سازی dark mode سریع می‌شه از CSS Custom Properties (همون CSS variables) استفاده کرد و بدون دست زدن به کلی selector، رنگ کل UI رو عوض کرد. ✨
ایده اینه که همه رنگ‌ها رو روی
با این روش، اضافه‌کردن stateهای جدید (مثل high-contrast) هم فقط یعنی تعریف چند متغیر جدید، نه refactor بزرگ روی کل CSS. 🔧
مرجع بیشتر در MDN 👇
Using CSS custom properties - MDN
🔖 #Web #وب #Frontend #Backend #CSS #dark_mode #CSS_variables #frontend #web
👤 Developix
💎 Channel: @DevelopixWeb
خیلی وقت‌ها برای پیاده‌سازی dark mode سریع می‌شه از CSS Custom Properties (همون CSS variables) استفاده کرد و بدون دست زدن به کلی selector، رنگ کل UI رو عوض کرد. ✨
ایده اینه که همه رنگ‌ها رو روی
:root تعریف بشه و بعد با اضافه کردن یک class به <html> یا <body>، تم عوض بشه. فقط یک‌بار style می‌نویسی و هرجا لازم بود از var(--color-name) استفاده می‌کنی. 🔁:root {
--bg: #ffffff;
--text: #111111;
}
html.dark {
--bg: #111827;
--text: #f9fafb;
}
body {
background-color: var(--bg);
color: var(--text);
}
// JavaScript
const html = document.documentElement;
const toggleTheme = () => {
html.classList.toggle('dark');
};
با این روش، اضافه‌کردن stateهای جدید (مثل high-contrast) هم فقط یعنی تعریف چند متغیر جدید، نه refactor بزرگ روی کل CSS. 🔧
مرجع بیشتر در MDN 👇
Using CSS custom properties - MDN
🔖 #Web #وب #Frontend #Backend #CSS #dark_mode #CSS_variables #frontend #web
👤 Developix
💎 Channel: @DevelopixWeb
👍4❤2