‏دارک‌مود با استانداردهای وب

به گفتهٔ نویسنده، احترام گذاشتن به تنظیمِ سیستم‌عاملِ کاربر ساده‌ست: از مدیاکوئریِ prefers-color-scheme تو CSS استفاده کن. ولی این کافی نیست؛ کاربر باید بتونه رو هر سایت جدا انتخابشو سفارشی کنه، مثلاً برای UIِ یه اپلیکیشن دارک‌مود بخواد ولی برای خوندنِ متن‌های طولانی لایت‌مود. پس دو تا کار لازمه: تنظیمِ سیستم به‌عنوان پیش‌فرضِ اولین بازدید، و اجازهٔ override با یه toggle.

نویسنده می‌گه رنگ‌بندیِ صفحه رو یا با متاتگِ HTML تو می‌شه تنظیم کرد یا با propertyِ CSSِ color-scheme روی المانِ html. چون رو اتصالِ کند ممکنه CSS دیر لود شه، روشِ توصیه‌شده متاتگه. برای اولین بازدید، با به ترجیحِ سیستم احترام بذار، و برای override با جاوااسکریپت مقدارِ content رو به light، dark یا light dark (برگشت به سیستم) عوض کن و انتخاب رو تو localStorage نگه دار:

const metaTag = document.querySelector('[name="color-scheme"]');
const savedScheme = localStorage.getItem("colorScheme");
if (savedScheme) { metaTag.setAttribute('content', savedScheme); }
// موقعِ زدنِ دکمهٔ دارک:
metaTag.setAttribute('content', 'dark');
localStorage.setItem("colorScheme", "dark");

نویسنده توضیح می‌ده که color-scheme چه چیزهایی رو تحتِ‌تأثیر می‌ذاره: رنگ‌ها و گرادیان‌ها و تصاویری که با تابعِ light-dark() ست شدن، رنگ‌های سیستمی مثل Canvas و CanvasText، رنگِ اسکرول‌بار، رنگِ پیش‌فرضِ المان‌های HTML مثل دکمه‌ها، iframeها (اگه با متاتگ opt-in کرده باشن) و SVGهایی که از light-dark() یا prefers-color-scheme استفاده می‌کنن.

مهم‌ترین نکته یه گسستِ آزاردهنده‌ست: مدیاکوئریِ prefers-color-scheme صرف‌نظر از مقدارِ color-scheme، همیشه تنظیمِ سیستم‌عامل رو منعکس می‌کنه. یعنی اگه یه toggleِ درون‌صفحه داری، نمی‌تونی به prefers-color-scheme تکیه کنی. مثلاً یه با media="(prefers-color-scheme: dark)" به toggleِ تو واکنش نشون نمی‌ده. تنها دو استثنا که color-scheme روی prefers-color-scheme اثر می‌ذاره، iframeها و SVGان.

نویسنده می‌گه گاهی باید فراتر از رنگ چیزی رو عوض کنی؛ مثلاً یه box-shadow ممکنه رو پس‌زمینهٔ تیره دیده نشه و بخوای به‌جاش border بذاری. استانداردها قراره یه راه برای تشخیصِ color-schemeِ فعلی (با if() یا style query) اضافه کنن ولی هنوز هیچ مرورگری پیاده‌اش نکرده. راهِ هکیِ فعلی اینه که یه متغیرِ CSS رو تو دارک‌مود true کنی و بعد با style query ازش استفاده کنی. یه رویکردِ تمیزترش هم اینه:

@property --usedScheme {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
body { --usedScheme: light-dark(white, black); }
@container style(--usedScheme: black) {
  .card { border: solid 1px rgb(94, 94, 94); }
}

نویسنده در آخر اشاره می‌کنه که شاید در آینده بشه prefers-color-scheme رو با جاوااسکریپت هم override کرد؛ یه spec و یه User Preferences API و یه نمونهٔ اولیه تو Chrome Canary هست، ولی تیمِ Safari با این ایده مخالفه.

نکات کلیدی:

• تنظیمِ color scheme با متاتگِ HTML توصیه می‌شه (چون CSS ممکنه دیر لود شه) و انتخاب تو localStorage می‌مونه
• override با عوض کردنِ مقدارِ content به light / dark / light dark انجام می‌شه
• گسستِ اصلی: prefers-color-scheme همیشه تنظیمِ سیستمه، نه toggleِ درون‌صفحه
• برای عوض کردنِ چیزی فراتر از رنگ (مثلِ box-shadow)، فعلاً باید از هکِ style query استفاده کرد
• استثناها: color-scheme فقط رو iframe و SVG روی prefers-color-scheme اثر می‌ذاره