‏Adaptive Dark Mode تو سافاری: سایت‌های روشن خودکار تاریک می‌شن

تیم WebKit خبر داده که سافاری 27.3 بتا یه قابلیت تازه به اسم Adaptive Dark Mode داره. وقتی کاربر روشنش کنه، سافاری صفحه‌های روشن رو به شکل تاریک نشون می‌ده. به گفتهٔ تیم، نزدیک ۴۰ درصد بارگذاری صفحه‌ها از طرف کاربرهایی هست که dark mode دارن، ولی فقط حدود ۱۰ درصد صفحه‌ها ازش پشتیبانی می‌کنن. این قابلیت قراره همین فاصله رو پر کنه.

اگه سایتی با color-scheme: light dark تو CSS یا تگ meta مربوط به color-scheme اعلام کرده باشه که dark mode داره، هیچی تغییر نمی‌کنه. برای بقیه، سافاری سریع رنگ‌های صفحه رو بررسی می‌کنه. اگه صفحه از قبل تیره باشه دست بهش نمی‌زنه، اگه روشن باشه تاریکش می‌کنه.

هستهٔ کار یه color matrix هست، یعنی یه فرمول ریاضی که روشنایی رنگ رو برعکس می‌کنه ولی hue (خود فام رنگ) رو نگه می‌داره. پس پس‌زمینهٔ روشن تیره می‌شه و متن تیره روشن. برای متن، هدف رسیدن به نسبت کنتراست 4.5:1 استاندارد WCAG هست. گرادیان‌های روشن CSS هم تیره می‌شن. بیشتر عکس‌ها دست نمی‌خورن، ولی SVGها بررسی می‌شن و اگه لازم باشه رنگشون عوض می‌شه. تو عکس‌های bitmap هم هیستوگرام پیکسل‌ها تحلیل می‌شه تا لوگوهای ساده سیاه و سفید برعکس بشن.

بعضی افکت‌ها مثل mask و mix-blend-mode روی المان‌هایی که رنگشون عوض شده خراب درمیان، برای همین گاهی خاموش می‌شن. محتوای هم کلاً دست نمی‌خوره، چون پیش‌بینیش سخته. تیم می‌گه چون این کار داخل خود موتور WebKit انجام می‌شه، هم سریعه و هم مصرف انرژیش کمه.

برای اینکه سایتت بهتر جواب بده، نویسنده‌ها پیشنهاد می‌دن لوگو و آیکون‌ها رو SVG کنی، به جای عکس‌های تکراری پس‌زمینه از رنگ یا گرادیان CSS استفاده کنی و عکس‌ها رو با پس‌زمینهٔ شفاف بسازی. اگه می‌خوای کنترل کامل دستت باشه، خودت dark mode رو با ابزارهایی مثل prefers-color-scheme و light-dark() پیاده کن و color-scheme رو همون اول تو HTML یا CSS اعلام کن، نه بعداً با جاوااسکریپت. اگه هم نمی‌خوای سایتت تبدیل بشه، color-scheme: light only رو بذار. البته کلمهٔ only تو بتای اول هنوز پشتیبانی نمی‌شه.

از نظر حریم خصوصی، سایت‌ها نمی‌تونن بفهمن این حالت روشنه یا نه، چون این خودش یه اطلاعات اضافه برای fingerprinting (یعنی شناسایی کاربر از روی ویژگی‌های مرورگرش) می‌شد. جاوااسکریپتی که رنگ‌های CSS رو بخونه همون رنگ‌های اصلی رو می‌گیره و عکس‌هایی که تو canvas کشیده می‌شن هم به شکل اصلیشون رندر می‌شن.

نکات کلیدی:

• Adaptive Dark Mode از سافاری 27.3 بتا اومده و باید کاربر خودش روشنش کنه.
• سایت‌هایی که color-scheme: light dark دارن هیچ تغییری نمی‌بینن.
• برای کنتراست متن، هدف نسبت 4.5:1 استاندارد WCAG هست.
• محتوای تبدیل نمی‌شه و افکت‌هایی مثل mix-blend-mode ممکنه خاموش بشن.
• با color-scheme: light only می‌شه جلوی تبدیل رو گرفت، ولی تو بتای 1 هنوز کار نمی‌کنه.
• سایت‌ها نمی‌تونن تشخیص بدن این حالت فعاله یا نه.