‏تم‌بندی مدرن CSS بدون جاوااسکریپت

تو این مقاله نویسنده یه ترکیب از قابلیت‌های جدید CSS رو نشون می‌ده که با هم یه سیستم تم داینامیک و قشنگ می‌سازن: کامپوننت‌هایی که تو حالت روشن سایه دارن و تو حالت تیره سایه‌ها جاشون رو به یه بوردر درخشان می‌دن، و متنی که همیشه روی پس‌زمینهٔ رنگیِ خودش خوناست. به گفتهٔ نویسنده همهٔ این کارها فقط با CSS انجام می‌شه و از می ۲۰۲۶ تو همهٔ مرورگرهای مدرن پایدار (Baseline Newly Available) شده.

پایهٔ کار تابع light-dark() هست. این تابع دو تا رنگ می‌گیره و تو حالت روشن اولی رو و تو حالت تیره دومی رو برمی‌گردونه. نکتهٔ مهمش اینه که به color-schemeِ محاسبه‌شدهٔ المان نگاه می‌کنه، نه به مدیا کوئری prefers-color-scheme؛ برای همین هم به تنظیم OS کاربر جواب می‌ده و هم می‌تونی هر جای صفحه اون رو دستی override کنی.

body {
  --bg: light-dark(lightblue, black);
  background: var(--bg);
}

مرحلهٔ بعد سوییچ کردن مکانیزم «ارتفاع» (elevation) کارته. تو تم روشن سایه به کارت حس بالا اومدن می‌ده، ولی تو تم تیره سایه گم می‌شه؛ پس نویسنده به‌جاش یه بوردر با درخشش نئونی می‌سازه. چون light-dark() فقط رنگ قبول می‌کنه نه کل تعریف سایه، ترفند اینه که برای هر لایهٔ سایه رنگش رو با light-dark() بذاری و لایه‌های اضافه رو تو حالت اشتباه transparent کنی. رنگ خودِ درخشش هم با relative color syntax یعنی oklch(from var(--bg) ...) از پس‌زمینهٔ کارت مشتق می‌شه تا همیشه با رنگ کارت هماهنگ باشه.

مرحلهٔ سوم کنتراست خودکاره. تابع contrast-color() هر رنگی رو می‌گیره و بر اساس الگوریتم کنتراست WCAG، سیاه یا سفید رو (هر کدوم کنتراست بهتری داشته باشه) برمی‌گردونه. با همین یه خط، متن کارت همیشه رو هر رنگ برندی که باشه خونا می‌مونه.

.card {
  --bg: var(--brand-color);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

مرحلهٔ آخر هم پالت‌های سفارشی با style query‌هاست. سیاه و سفیدِ خالی گاهی خشک به نظر می‌رسه، پس نویسنده اول یه custom property با @property رجیستر می‌کنه و مقدار contrast-color() رو توش می‌ذاره، بعد با @container style() بر اساس اینکه نتیجه سیاه شده یا سفید، به پالت‌های رنگی گرم یا سرد شاخه می‌زنه؛ اینطوری متن به‌جای سیاه و سفیدِ خشک، به رنگِ خودِ کارت متمایل می‌شه. نویسنده می‌گه این ترکیب باعث می‌شه بتونی تم کلان (کل صفحه) رو از تم خرد (داخل هر کارت) جدا کنی و یه سیستم تم اعلانی و ترکیب‌پذیر بسازی. فقط این نکته رو می‌گه که اگه بخوای با @function تمیزترش کنی، پشتیبانیش فعلاً محدود به Chrome 139 به بالاست.

نکات کلیدی:

• light-dark() بر اساس color-schemeِ محاسبه‌شده رنگ رو انتخاب می‌کنه و ارث‌بری و ترکیب‌پذیره
• برای سوییچ سایه به درخشش، رنگ هر لایهٔ سایه رو با light-dark() می‌ذاری و بقیه رو transparent می‌کنی
• contrast-color() با الگوریتم WCAG خودکار متن سیاه یا سفیدِ خونا رو انتخاب می‌کنه
• با @property و @container style() می‌شه پالت رنگی هوشمند و متمایل به رنگ کارت ساخت
• کل تکنیک از می ۲۰۲۶ تو همهٔ مرورگرهای مدرن پایداره؛ فقط @function هنوز محدود به Chrome 139+ هست