ترفندهای استفاده از متغیرهای CSS (CSS Variables) برای مدیریت تم‌های دارک‌مود

چرا باید از متغیرهای CSS استفاده کنیم؟ (CSS Variables چیستند؟)

بذارید از پایه شروع کنیم. متغیرهای CSS یا Custom Properties، ابزارهایی هستن که بهت اجازه می‌دن مقادیر مشخصی رو در فایل‌های CSS تعریف کنی و هر جای دیگه از اونها استفاده کنی. فکر کن یه رنگ خاص داری که قراره توی ۱۰ جای مختلف سایتت استفاده بشه. اگه بخوای اون رنگ رو عوض کنی، باید ۱۰ جا رو دستی ادیت کنی. اما با متغیرها، کافیه فقط مقدار متغیر رو یک بار تغییر بدی، و تمام! اینجاست که معجزه شروع میشه.

این متغیرها از قدرت آبشاری (Cascading) CSS بهره می‌برن، یعنی می‌تونن در Scopeهای مختلف (مثلاً در یک عنصر خاص یا در کل داکیومنت) تعریف و Override بشن. این قابلیت، بستر اصلی برای مدیریت تم‌های مختلف مثل دارک‌مود رو فراهم می‌کنه.
برای یادگیری بیشتر در مورد ترفندهای CSS، حتماً بخش اسنیپت‌های CSS ما رو چک کن.

سینتکس پایه متغیرهای CSS

تعریف یه متغیر خیلی راحته. با دو تا خط تیره (–) اسمش رو مشخص می‌کنی و بعدش هم مقدارش رو می‌ذاری. برای استفاده ازش هم از تابع var() کمک می‌گیریم.

:root {
  --primary-color: #007bff; /* تعریف متغیر در Scope سراسری */
  --text-color: #333;
  --bg-color: #fff;
}

body {
  background-color: var(--bg-color); /* استفاده از متغیر */
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
    

آماده‌سازی پروژه برای دارک‌مود با CSS Variables

خب، حالا که با متغیرها آشنا شدیم، بریم سراغ بخش جذاب ماجرا: پیاده‌سازی دارک‌مود. اولین قدم اینه که یه سری متغیرهای پایه برای رنگ‌ها تعریف کنیم. این متغیرها باید تو حالت عادی (لایت‌مود) مقادیر خودشون رو داشته باشن و وقتی کاربر تم رو تغییر میده، مقادیرشون هم عوض بشن.

تعریف متغیرهای پایه برای تم‌ها

معمولاً متغیرهای اصلی رو داخل :root (که همون عنصر html هست) تعریف می‌کنیم تا در سراسر داکیومنت در دسترس باشن. بعدش برای دارک‌مود، یه کلاس مثل .dark-mode ایجاد می‌کنیم و داخل اون، همین متغیرها رو با مقادیر دارک‌مودشون Override می‌کنیم.

/* حالت پیش‌فرض (لایت‌مود) */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
  --secondary-bg: #f8f9fa;
  --border-color: #dee2e6;
}

/* حالت دارک‌مود */
.dark-mode {
  --background-color: #1a202c; /* پس‌زمینه تیره */
  --text-color: #e2e8f0;       /* متن روشن */
  --primary-color: #66b3ff;   /* رنگ اصلی روشن‌تر */
  --secondary-bg: #2d3748;    /* پس‌زمینه ثانویه تیره */
  --border-color: #4a5568;    /* مرزهای تیره‌تر */
}

/* استفاده از متغیرها در عناصر HTML */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease; /* برای انیمیشن نرم */
}

.container {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color); /* معمولاً رنگ متن دکمه سفید یا روشن باشه */
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
    

پیاده‌سازی مکانیزم سوئیچ دارک‌مود

حالا که متغیرها رو تعریف کردیم، نیاز داریم به یه راهی برای تعویض این تم‌ها. دو تا رویکرد اصلی داریم: یا بذاریم مرورگر کاربر تصمیم بگیره (بر اساس تنظیمات سیستم عاملش) یا یه سوئیچ دستی برای کاربر بذاریم. می‌تونیم این دو تا رو با هم ترکیب هم بکنیم.

۱. استفاده از @media (prefers-color-scheme: dark)

این یه قابلیت CSS هست که بهمون اجازه میده بر اساس تنظیمات سیستم عامل کاربر، استایل‌ها رو اعمال کنیم. اگه کاربر تو سیستمش دارک‌مود رو انتخاب کرده باشه، این media query فعال میشه و استایل‌های داخلش اعمال میشن.

/* حالت پیش‌فرض (لایت‌مود) در :root */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  /* ... سایر متغیرها ... */
}

/* اعمال دارک‌مود اگر سیستم عامل کاربر روی دارک تنظیم شده باشد */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a202c;
    --text-color: #e2e8f0;
    /* ... متغیرهای دارک‌مود ... */
  }
}
    

این روش خیلی خوبه چون کاربر نیاز به هیچ کاری نداره و سایتت به طور خودکار با تنظیمات سیستمش هماهنگ میشه. اما گاهی اوقات، کاربر دلش می‌خواد خودش بین لایت و دارک سوئیچ کنه که اینجا باید سراغ جاوااسکریپت بریم.
اسنیپت‌های جاوااسکریپت ما می‌تونن بهت کلی ایده برای این کار بدن.

۲. گام‌به‌گام: ساخت یک سوئیچ تم دستی با جاوااسکریپت

برای ساخت یه سوئیچ دستی، یه دکمه یا توگل توی HTML لازم داریم. بعد با جاوااسکریپت، وقتی کاربر روی اون کلیک می‌کنه، یه کلاس (مثلاً .dark-mode) رو به عنصر body یا html اضافه یا حذف می‌کنیم. این کلاس همون کلاسی هست که متغیرهای دارک‌مود رو Override می‌کنه.

HTML برای دکمه سوئیچ

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدیریت تم با CSS Variables</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>مدیریت تم با CSS Variables</h1>
    <button id="theme-toggle" aria-label="Toggle dark mode">
      تغییر تم
    </button>
  </header>
  <main class="container">
    <p>این یک متن تستی برای نمایش تغییرات تم است.</p>
    <button>دکمه نمونه</button>
  </main>
  <script src="script.js"></script>
</body>
</html>
    

جاوااسکریپت برای منطق سوئیچ

اینجا جاوااسکریپت میاد و کار اصلی رو انجام میده. علاوه بر اینکه کلاس رو تغییر میده، باید تنظیمات کاربر رو هم در LocalStorage ذخیره کنه تا وقتی کاربر دوباره به سایتت سر زد، تم مورد علاقه‌اش یادش باشه.

document.addEventListener('DOMContentLoaded', () => {
  const themeToggle = document.getElementById('theme-toggle');
  const body = document.body;

  // بررسی تنظیمات ذخیره شده در LocalStorage
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    body.classList.add(savedTheme);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // اگر کاربر قبلاً تمی را انتخاب نکرده باشد، از تنظیمات سیستم عامل استفاده کن
    body.classList.add('dark-mode');
  }

  themeToggle.addEventListener('click', () => {
    if (body.classList.contains('dark-mode')) {
      body.classList.remove('dark-mode');
      localStorage.setItem('theme', 'light-mode'); // ذخیره به عنوان لایت‌مود
    } else {
      body.classList.add('dark-mode');
      localStorage.setItem('theme', 'dark-mode');  // ذخیره به عنوان دارک‌مود
    }
  });
});
    

همونطور که دیدی، تو این جاوااسکریپت، ابتدا تنظیمات قبلی کاربر از LocalStorage خونده میشه. اگه چیزی پیدا نشد، از prefers-color-scheme برای تشخیص تم سیستم عامل استفاده می‌کنیم. این ترکیب، یه تجربه کاربری عالی رو فراهم می‌کنه.
برای کسب اطلاعات بیشتر در مورد جاوااسکریپت و بهینه‌سازی کدهات، می‌تونی به اسنیپت‌های JS مراجعه کنی.

متغیرهای CSS و طراحی ریسپانسیو: ترکیب جادویی

اینجا یه نکته جالب دیگه هم هست: متغیرهای CSS فقط برای رنگ‌ها نیستن! تو می‌تونی هر مقداری رو به عنوان متغیر تعریف کنی، از سایز فونت گرفته تا فاصله بین عناصر یا حتی z-index. این یعنی می‌تونی متغیرها رو داخل Media Queries هم تغییر بدی و کنترل بی‌نظیری روی طراحی ریسپانسیو داشته باشی.

تغییر مقادیر متغیرها در Media Queries

فرض کن می‌خوای توی صفحات موبایل، فاصله بین بخش‌ها کمتر باشه. به جای اینکه هر بار margin رو جداگانه تغییر بدی، می‌تونی یه متغیر برای اون تعریف کنی و توی Media Query فقط مقدار اون متغیر رو عوض کنی.

:root {
  --spacing-unit: 20px;
  --font-size-base: 16px;
}

body {
  padding: var(--spacing-unit);
  font-size: var(--font-size-base);
}

@media (max-width: 768px) {
  :root {
    --spacing-unit: 10px; /* کاهش فاصله برای موبایل */
    --font-size-base: 14px; /* کاهش سایز فونت برای موبایل */
  }
}
    

این تکنیک برای ساخت وب‌سایت‌های وردپرسی ریسپانسیو و مدیریت استایل‌های آن در دستگاه‌های مختلف، از موبایل و تبلت گرفته تا لپ‌تاپ و تلویزیون، فوق‌العاده کاربردیه.

بهترین روش‌ها و نکات پیشرفته برای مدیریت تم‌ها

رسیدیم به اونجایی که قراره کدنویسی رو از یه سطح ساده به یه سطح حرفه‌ای برسونیم. استفاده از CSS Variables فقط تعریف چند تا رنگ نیست، بلکه یه استراتژی کامل می‌طلبه.

۱. سازماندهی متغیرها (Global vs Component-Specific)

متغیرها رو می‌تونیم در Scopeهای مختلف تعریف کنیم. متغیرهای کلی (Global) رو داخل :root بذار، مثل رنگ‌های اصلی، فونت‌ها، و فاصله‌گذاری‌های عمومی. اما برای کامپوننت‌های خاص، می‌تونی متغیرها رو داخل همون کامپوننت تعریف کنی تا تغییراتش فقط روی خودش اثر بذاره. مثلاً یه کامپوننت کارت (Card) می‌تونه متغیر --card-bg خودش رو داشته باشه.

۲. نام‌گذاری معنادار و سازگار

مهم‌ترین اصل در برنامه‌نویسی، خواناییه. برای متغیرها، از نام‌هایی استفاده کن که هدفشون رو مشخص کنن. مثلاً به جای --c1، از --primary-background یا --text-on-dark استفاده کن. این کار بعداً تو دیباگینگ و نگهداری پروژه جونت رو نجات میده.

۳. Fallback Values (مقادیر جایگزین)

وقتی از var() استفاده می‌کنی، می‌تونی یه مقدار جایگزین هم براش مشخص کنی. اگه متغیر مورد نظر پیدا نشد، این مقدار جایگزین استفاده میشه. این کار به خصوص برای پشتیبانی از مرورگرهای قدیمی‌تر یا در شرایطی که متغیر اشتباهی تایپ شده باشه، عالیه.

.element {
  background-color: var(--some-undefined-var, #ff0000); /* اگر متغیر پیدا نشد، قرمز شود */
}
    

۴. استفاده از متغیرها در توابع CSS (مثل calc())

یکی از جذابیت‌های متغیرها اینه که می‌تونی اونها رو با توابع CSS مثل calc()، rgb()، hsl() و… ترکیب کنی. این انعطاف‌پذیری فوق‌العاده‌ای بهت میده.

:root {
  --base-spacing: 16px;
  --header-height: 60px;
}

.main-content {
  padding-top: calc(var(--header-height) + var(--base-spacing));
}
    

جدول آموزشی: مقایسه روش‌های مدیریت تم

برای اینکه دید بهتری نسبت به مزایای CSS Variables داشته باشی، یه مقایسه سریع با روش‌های قدیمی‌تر یا پیش‌پردازنده‌ها می‌تونه حسابی کمکت کنه.

چالش‌ها و راه‌حل‌ها در استفاده از CSS Variables

هیچ تکنولوژی بدون چالش نیست، و CSS Variables هم از این قاعده مستثنی نیست. اما خوشبختانه، برای بیشتر این چالش‌ها، راه‌حل‌های خوبی وجود داره.

۱. پشتیبانی مرورگرها

مشکل: در حالی که بیشتر مرورگرهای مدرن از CSS Variables پشتیبانی می‌کنن، IE11 و برخی نسخه‌های قدیمی‌تر مرورگرها خیر.

راه‌حل: برای این مشکل، می‌تونی از PostCSS به همراه پلاگین postcss-custom-properties استفاده کنی. این پلاگین متغیرهای CSS رو به مقادیر ثابت تبدیل می‌کنه تا برای مرورگرهای قدیمی هم قابل فهم باشن. البته، بهترین راه اینه که از Fallback values استفاده کنی تا حداقل یه استایل پایه برای اون مرورگرها وجود داشته باشه.

/* CSS عادی برای مرورگرهای قدیمی */
body {
  background-color: #ffffff; /* مقدار ثابت */
  color: #333333;
}

/* متغیرها برای مرورگرهای مدرن که Override می‌شوند */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
}

body {
  background-color: var(--background-color); /* مرورگر مدرن این را می‌خواند */
  color: var(--text-color);
}

.dark-mode {
  --background-color: #1a202c;
  --text-color: #e2e8f0;
}
    

۲. Scope و ارث‌بری

مشکل: گاهی اوقات، مدیریت اینکه متغیرها در کجا تعریف شده‌اند و در کجا قابل دسترسی هستند، ممکنه کمی پیچیده بشه. مثلاً یه متغیر که داخل یه div تعریف شده، فقط برای خودش و فرزندانش قابل دسترسیه.

راه‌حل: همیشه متغیرهای گلوبال رو در :root تعریف کن. برای متغیرهای مربوط به یک کامپوننت خاص، اونها رو مستقیماً روی اون کامپوننت یا عنصر پدرش تعریف کن. این کار باعث میشه کد تمیزتر و قابل پیش‌بینی‌تر باشه.

۳. دیباگینگ (Debugging)

مشکل: پیدا کردن اینکه یه متغیر از کجا داره مقدارش رو میگیره یا چرا Override نشده، ممکنه کمی وقت‌گیر باشه.

راه‌حل: ابزارهای توسعه مرورگر (Developer Tools) توی Chrome و Firefox پشتیبانی خوبی از CSS Variables دارن. تو می‌تونی مقدار فعلی متغیرها رو ببینی و حتی اونها رو درجا تغییر بدی تا تاثیرش رو مشاهده کنی. این قابلیت دیباگینگ رو خیلی راحت‌تر می‌کنه.

اهمیت دسترسی‌پذیری (Accessibility) در تم‌های دارک‌مود

ساخت یه دارک‌مود فقط به معنی تغییر رنگ‌ها به تیره نیست. باید حواسمون به همه کاربرها باشه، مخصوصاً اونهایی که مشکلات بینایی دارن.

کنتراست رنگی کافی

مطمئن شو که کنتراست بین رنگ متن و پس‌زمینه در هر دو تم (لایت و دارک) به اندازه کافی بالاست. حداقل نسبت کنتراست 4.5:1 برای متن‌های عادی توصیه میشه (استاندارد WCAG AA). ابزارهای آنلاین زیادی هستن که می‌تونن بهت کمک کنن این نسبت رو چک کنی.

حالت‌های فوکوس و انتخاب

وقتی کاربر با کیبورد تو سایتت حرکت می‌کنه، باید بتونه به راحتی ببینه الان روی کدوم عنصر فوکوس کرده. حالت‌های :focus، :hover و :active رو برای هر دو تم چک کن و مطمئن شو که قابل مشاهده و واضح هستن. از رنگ‌های قوی‌تر و برجسته‌تر برای حالت فوکوس در دارک‌مود استفاده کن.

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌های آن‌ها

طبیعیه که تو مسیر پیاده‌سازی دارک‌مود با CSS Variables، به مشکلاتی بربخوری. اینجا چند تا از رایج‌ترین مشکلات و راه‌حل‌هاشون رو با هم بررسی می‌کنیم:

نتیجه‌گیری

رفیق برنامه‌نویس، دیدی چقدر CSS Variables کارمون رو برای مدیریت تم‌ها، مخصوصاً دارک‌مود، راحت‌تر می‌کنه؟ دیگه لازم نیست نگران تکرار کد یا پیچیدگی‌های نگهداری باشی. با یه استراتژی درست، می‌تونی یه سیستم تم منعطف و قدرتمند بسازی که هم برای خودت دردسر کمتری داره و هم تجربه کاربری فوق‌العاده‌ای رو برای بازدیدکنندگانت فراهم می‌کنه.
این قابلیت نه تنها بهت کمک می‌کنه تا کد تمیزتری داشته باشی، بلکه توسعه‌ و بروزرسانی پروژه رو هم سریع‌تر و لذت‌بخش‌تر می‌کنه. پس ازش استفاده کن و پروژه‌هات رو به یه سطح جدید ببر!
اگر دوست داری بیشتر در مورد ابزارهای برنامه‌نویسی بدونی، حتماً یه سری به FA-Tools بزن.

/* Basic Reset & Font for readability – This would typically be in a main CSS file */
body {
font-family: ‘Vazirmatn’, sans-serif; /* Or any suitable Persian font */
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl; /* For Persian text */
text-align: right;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(–background-color, #f0f2f5); /* Fallback for root variables */
color: var(–text-color, #333);
transition: background-color 0.3s ease, color 0.3s ease;
}

/* General link styling */
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Responsive adjustments for tables and code blocks within the content */
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #dee2e6; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }

td {
border: none;
border-bottom: 1px solid #dee2e6;
position: relative;
padding-right: 50%;
text-align: right;
}

td:before {
position: absolute;
top: 0;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
content: attr(data-label);
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
padding: 12px 15px;
box-sizing: border-box;
}
/* Add data-label to td for proper display on small screens */
table td:nth-of-type(1):before { content: “ویژگی”; }
table td:nth-of-type(2):before { content: “متغیرهای CSS (CSS Variables)”; }
table td:nth-of-type(3):before { content: “متغیرهای SASS/LESS یا روش سنتی”; }

.infographic-item {
flex: 1 1 100%; /* Stack items on small screens */
}

pre {
white-space: pre-wrap; /* Allows long lines to wrap in code blocks */
word-wrap: break-word;
}
}

@media (min-width: 769px) {
/* Ensure table headers are visible on larger screens */
table th {
display: table-cell;
}
table td:before {
display: none;
}
}

/* Styles for the infobox items to ensure proper flex behavior for responsiveness */
.infographic > div {
flex: 1 1 calc(33% – 20px); /* Adjust for 3 columns, accounting for gap */
box-sizing: border-box;
}
@media (max-width: 1024px) {
.infographic > div {
flex: 1 1 calc(50% – 20px); /* 2 columns on tablet */
}
}
@media (max-width: 600px) {
.infographic > div {
flex: 1 1 100%; /* 1 column on mobile */
}
}

“`