‏تم روشن و تاریک، این‌بار حرفه‌ای‌تر

نویسنده تو این پست توضیح می‌ده که چطور می‌شه با ترکیب چندتا قابلیت جدید CSS -- یعنی @property، light-dark()، contrast-color() و کوئری‌های استایل (@container style()) -- یه سیستم تم‌بندی کامل و داینامیک ساخت. به گفته‌ی نویسنده، همه‌ی این تکنیک‌ها از می ۲۰۲۶ تو همه‌ی مرورگرهای مدرن پشتیبانی می‌شن، یعنی دیگه لازم نیست منتظر یه مرورگر خاص بمونی.

پایه‌ی کار، تابع light-dark()ـه. این تابع دو مقدار رنگ می‌گیره و بر اساس مقدار محاسبه‌شده‌ی color-scheme یکی‌شونو برمی‌گردونه؛ یعنی هم به ترجیح سیستم‌عامل کاربر واکنش نشون می‌ده، هم می‌شه تو هر سطحی از CSS اونو override کرد:

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

چون سایه‌ها تو تم تاریک عملاً دیده نمی‌شن، نویسنده به‌جاشون از یه حاشیه‌ی نورانی (glow) استفاده می‌کنه. ترفند اینه که هر لایه از سایه با light-dark() جداگانه تنظیم می‌شه: تو حالت روشن سایه‌های خاکستری دیده می‌شن و تو تاریک همون لایه‌ها transparent می‌شن، درحالی‌که لایه‌های حاشیه‌ی نورانی -- که رنگشون با oklch(from var(--bg) ...) از پس‌زمینه‌ی خود کارت گرفته می‌شه -- فعال می‌شن.

برای اینکه متن روی هر پس‌زمینه‌ای خوانا بمونه، از تابع contrast-color() استفاده می‌شه که با الگوریتم کنتراست WCAG خودش تصمیم می‌گیره متن سیاه باشه یا سفید:

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

چون سیاه و سفید خالص گاهی خیلی خشک به‌نظر میاد، نویسنده با کوئری‌های استایل یه قدم جلوتر می‌ره: نتیجه‌ی contrast-color() رو تو یه custom property ذخیره می‌کنه و بعد بر اساس سفید یا سیاه بودنش، با syntax رنگ نسبی (oklch(from var(--bg) ...)) پالت‌های رنگی متفاوتی اعمال می‌کنه. این‌جوری رنگ متن به‌جای سیاه و سفید خشک، به هیوی خود کارت نزدیک‌تر می‌شه.

به گفته‌ی نویسنده، این ترکیب از می ۲۰۲۶ به‌صورت Baseline تو همه‌ی موتورهای مرورگر پایدار و قابل‌استفاده‌ست. تنها بخشی که هنوز پشتیبانی محدودی داره، استفاده از @function برای تمیزتر کردن کدهاست که فعلاً فقط تو Chrome ۱۳۹ به بعد کار می‌کنه.

نکات کلیدی:

• «light-dark()» رنگ رو بر اساس color-scheme محاسبه‌شده انتخاب می‌کنه، نه فقط ترجیح سیستم‌عامل
• برای تم تاریک، سایه‌ها با یه حاشیه‌ی نورانی جایگزین می‌شن
• «contrast-color()» با الگوریتم WCAG رنگ سیاه یا سفید متن رو خودکار انتخاب می‌کنه
• کوئری‌های استایل امکان ساخت پالت‌های رنگی سفارشی‌تر رو می‌دن
• کل این تکنیک از می ۲۰۲۶ تو همه‌ی مرورگرهای مدرن پشتیبانی می‌شه