‏هفت راه تم رنگی فقط با CSS

نویسنده می‌گه این مطلب موقع ساختنِ سایت خودش به ذهنش رسید، اون هم چون light-dark() رو فراموش کرده بود؛ وگرنه شاید اصلاً سراغ این همه روش نمی‌رفت. نیازمندیش هم ساده‌ست: باید سه حالتِ خودکار (بر اساس prefers-color-scheme)، روشن و تیره با رادیو باتن قابل انتخاب باشن و همه‌چی بدون جاوااسکریپت کار کنه. تقریباً همهٔ روش‌ها برای انتخابِ دستی به سلکتور :has() تکیه می‌کنن (مثل :root:has(#theme-dark:checked)) و برای حالت خودکار به @media (prefers-color-scheme: dark).

روش اول نوشتنِ همه‌چی به‌صورت دستیه: برای هر عنصر، رنگش رو جدا توی هر تم تعریف می‌کنی. به گفتهٔ نویسنده این روش سازگارترینه و اضافه‌کردنِ تم جدید توش راحته، ولی پرحرفه و مقدارِ تمِ تیره باید تکرار بشه. روش دوم، که نویسنده می‌گه سنتاً محبوب‌ترینه، استفاده از متغیرهای پالتِ رنگه: یه دسته متغیر CSS توی :root تعریف می‌کنی و سرِ مصرف فقط var() صدا می‌زنی، که سنتکسِ محل مصرف رو ایده‌آل می‌کنه.

روش سوم «هکِ space toggle» ـه که نویسنده اون رو نسخهٔ فقیرانهٔ if() می‌دونه. ایده اینه که یه متغیر رو بین مقدارِ initial و خالی سوییچ می‌کنی تا یه شرطِ تک‌شاخه بسازی. محل مصرفش این شکلیه:

some-element {
  color: var(--light, darkred) var(--dark, pink);
}

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

روش چهارم استفاده از color-mix() با یه متغیر برای هر تمه؛ همون چیزی که نویسنده برای سایت خودش انتخاب کرده. ایده اینه که رنگ رو به‌صورت ترکیبی از همهٔ تم‌ها تعریف کنی و با یه متغیر سهمِ یکیشون رو ۱۰۰٪ و بقیه رو ۰٪ کنی. مثلاً با تعریفِ --dark به‌صورت درصد:

some-element {
  color: color-mix(in oklab, darkred, pink var(--dark));
}

نویسنده می‌گه جذابیتش اینه که در رو به روی ترکیب کردنِ واقعیِ رنگ‌ها و تم‌ها باز می‌کنه، ولی هشدار می‌ده که نوشتنِ in oklab فعلاً اجباریه و کنترلِ نحوهٔ درون‌یابی می‌تونه دردسرساز باشه.

سه روش آخر تازه‌تر یا عجیب‌ترن. light-dark() (از Safari 17.5 به بعد) سنتکسِ تمیز و فشرده‌ای داره ولی فقط برای دو تمِ روشن و تیره کار می‌کنه و حتماً باید color-scheme رو درست ست کنی وگرنه اصلاً کار نمی‌کنه. تابع if() فعلاً فقط روی مرورگرهای کرومیومیه و سنتکسش به انتظارِ برنامه‌نویس‌ها نزدیکه ولی پرحرفه. روش هفتم هم استفاده از انیمیشنِ @keyframes متوقف‌شده‌ست که نویسنده خودش بهش می‌گه کارِ آدمای دیوونه — انعطافش تو ترکیب رنگ‌ها بالاست ولی تکرار و دردسرِ ترکیبِ اعلان‌های animation زیاده. نویسنده در آخر یه جدول مقایسه می‌ذاره که هر تکنیک رو از نظر سازگاری، تکرار، نگه‌داری و قابلیت درون‌یابی کنار هم بذاره.

نکات کلیدی:

• موضوع اصلی: هفت تکنیکِ فقط-CSS برای تعریف رنگِ هر تم، با پشتیبانی از حالت‌های روشن/تیره/خودکار و بدون جاوااسکریپت.
• تقریباً همه به :has() برای انتخابِ دستی و prefers-color-scheme برای حالت خودکار تکیه می‌کنن.
• روش دستی سازگارترینه؛ متغیرهای پالت محبوب‌ترین و راحت‌ترین سرِ مصرف‌ان.
• color-mix() امکانِ ترکیب واقعی تم‌ها رو می‌ده و انتخابِ خود نویسنده برای سایتشه؛ light-dark() تمیزه ولی فقط روشن/تیره.
• if() فعلاً فقط روی کرومیومه و روشِ @keyframes بیش‌ازحد پیچیده و فقط برای موارد خاصِ ترکیب رنگ توصیه می‌شه.