تاثیرات Dark Mode مرورگر Samsung Internet روی صفحات وب

احتمالا می‌دانید که خیلی از افراد در اطراف ما از موبایل‌های سامسونگ استفاده می‌کنند و از آن‌جا که مرورگر پیش‌فرض این گوشی‌ها، سامسونگ اینترنت (Samsung Internet) می‌باشد، می‌توان گفت تعداد افرادی که از سامسونگ اینترنت استفاده می‌کنند کم نیست.

یکی از مشکلاتی که خیلی از کاربران این مرورگر با آن روبرو هستند، نمایش نامناسب وبسایت‌ها در حالت دارک مود (Dark Mode) یا به قول این مرورگر، Night Mode می‌باشد. در این پست قصد داریم با رفتار این مرورگر در این حالت را مورد بررسی قرار دهیم.

بررسی رفتار سامسونگ اینترنت در دارک مود

بعد از کلی بررسی روی مثال‌ها، در این قسمت می‌خواهیم رفتار سامسونگ اینترنت با وبسایت‌ها در حالت دارک مود را بیان کنیم.

? متن‌ها | Texts

به طور کلی می‌توان گفت روشنایی (brightness) در تکست‌ها با نسبت عکس مقدار اولیه افزایش پیدا می‌کند. در نتیجه:

• متن‌های سیاه رنگ به متون سفید تبدیل می‌شوند
• متون رنگی اندکی روشن‌تر از رنگ اصلی خود نمایش داده می‌شوند
• نوشته‌های سفید رنگ (حداکثر brightness) بدون تغییر باقی می‌مانند

?️ پس‌زمینه‌ها و حاشیه‌ها | Backgrounds and Borders

رفتار سامسونگ اینترنت در برابر backgroundها و borderها در دارک مود دقیقا برعکس متن‌ها می‌باشد! یعنی brightness در textها با نسبت عکس مقدار اولیه کاهش پیدا می‌کند. در نتیجه:

• پس زمینه‌ها و حاشیه‌های سفید رنگ سیاه تبدیل می‌شوند
• متون رنگی اندکی تیره‌تر از رنگ اصلی خود می‌شوند
• نوشته‌های سیاه رنگ (حداقل brightness) بدون تغییر باقی می‌مانند

? عکس‌ها | Images

رفتار مرورگر نسبت به عکس‌ها خود می‌تواند به سه حالت مختلف تقسیم‌بندی شود:

۱ - عکس‌هایی که در تگ <img> نوشته شدند

این نوع عکس‌ها بدون تغییر باقی می‌مانند،‌ ولی اندکی از روشنایی آن‌ها کاسته می‌شود.

۲ - عکس‌هایی که به عنوان پس‌زمینه در CSS قرار داده شدند

عکس‌هایی که در CSS نوشته می‌شوند نیز مانند عکس‌هایی که با img نوشته شده‌اند به همان شکل اولیه‌ی خود باقی می‌مانند فقط اندکی تیره می‌شوند.

۳ - عکس‌های <svg>

در این نوع عکس‌ها روشنایی با نسبت عکس مقدار اولیه افزایش پیدا می‌کند. درست مانند متن‌ها!

آیا راهی برای غیرفعال کردن این قابلیت از سمت توسعه‌دهندگان وب‌سایت‌ها وجود دارد؟

شاید اولین راهی که به ذهن برسد این است که کلا صورت مسئله را پاک کنیم و از داخل خود مرورگر قابلیت دارک مود را غیرفعال کنیم. اما آیا روشی برای غیر فعال کردن آن برای توسعه‌دهندگان یک وبسایت وجود دارد که با وجود فعال بودن این ویژگی، بتوانند از تغییرات ظاهری ناخواسته‌ی وب‌سایت خود جلوگیری کنند؟

خیلی دیگر از مرورگر‌ها نیز در کنار سامسونگ اینترنت قابلیت دارک مود را دارا هستند. در این مرورگر‌ها می‌توان با چند خط کد زدن تعیین کرد که ظاهر سایت در هر یک از حالات dark و light به چه صورتی باشد.

راه‌حل‌ این مسئله، استفاده از meta tag زیر می‌باشد:

<meta name="color-scheme" content="light dark">

و همچنین در کنار آن یک مدیا کوئری (media query) به نام prefers-color-scheme می‌باشد. در لینک مستندات این مدیا کوئری یک مثال آورده شده که به صورت زیر می‌باشد:

<div class="day">Day (initial)</div>
<div class="day light">Day (changes in light scheme)</div>
<div class="day dark">Day (changes in dark scheme)</div>
<br>
<div class="night">Night (initial)</div>
<div class="night light">Night (changes in light scheme)</div>
<div class="night dark">Night (changes in dark scheme)</div>

حال برای این شش المان، استایل‌های زیر را تعریف می‌کنیم:


:root {
color-scheme: light dark;
}

.day { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
.day.dark { background: #333; color: white; }
.night.dark { background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light { background: white; color: #555; }
.night.light { background: #eee; color: black; }
}

خروجی کد‌های گفته شده تقریبا در تمام مرورگرها به درستی نمایش داده می‌شود... بجز سامسونگ اینترنت!

این مرورگر با اینکه بر اساس Google’s Chromium browser engine توسعه داده شده، اما در برخی موارد رفتار آن با مرورگر کروم متفاوت است. یکی از این تفاوت‌ها که برای توسعه دهندگان Front-end دردسر ایجاد کرده، همین بحث دارک مود می‌باشد. در نتیجه:

خیر. هنوز (در زمان نوشتن این نوشته) راه حلی درست برای کنترل رفتار مرورگر سامسونگ اینترنت در مقابل وبسایت‌ها در حالت دارک مود وجود ندارد!

چه باید کرد؟

به end-user ها پیشنهاد می‌شود تا زمانیکه شرکت سامسونگ مشکلات مطرح شده را برطرف نکرده یا راه حلی بیان نکرده، از حالت دارک مود این مرورگر استفاده نکنند.

به توسعه دهندگان توصیه می‌شود:

استفاده نکردن از شکل‌های SVG برای background

فرض کنید پس زمینه‌ای سفید رنگ دارید و می‌خواهید روی آن طرحی گرافیکی و طوسی رنگ به فرمت svg استفاده کنید؛ همچنین متون مشکی رنگ در این صفحه قرار دارند.

سامسونگ اینترنت همانگونه که پیش‌تر بیان شد با این نوع عکس‌ها مانند متن رفتار می‌کند و در نتیجه در حالت دارک مود، پس زمینه‌ای مشکی با طرح گرافیکی سفید خواهیم داشت.

البته برای حل چنین موضوعی می‌توان به جای استفاده از رنگ طوسی (مثلا eee#) از زنگ طوسی با opacity کم (برای مثال aaa5 ) برای طرح گرافیکی استفاده کرد. در چنین حالتی می‌توان خروجی قابل قبول تری در حالت دارک مود دریافت کرد:

استفاده از فایل‌های SVG برای لوگو

این برای حالاتی است که در لوگوی‌ شما نوشته‌ای مشکی رنگ وجود دارد. اگر دارک مود را فعال کنیم، متن لوگو در پس زمینه‌ی مشکی گم خواهد شد. اما در حالتی که لوگو به صورت svg می‌باشد، رنگ متن سفید می‌شود. با اینکه می‌دانیم سایر رنگ‌های لوگو عوض خواهند شد، اما حداقل با لوگویی خوانا روبرو خواهیم بود!

نمایش پیام به کاربر

اگر واقعا وبسایت شما به گونه‌ای طراحی شده که به هیج وحه نباید در حالت دارک مود سامسونگ اینترنت (با توجه به شرایط گفته شده) مورد استفاده قرار گیرد، می‌توان در صورتی که user-agent کاربر مساوی با SamsungBrowserبود، پیامی به کاربر نمایش دهیم و از او درخواست کنیم که برای مشاهده‌ی وبسایت ما، از مرورگر دیگری استفاده نماید.