زمینه تیره خودکار

André Cipriani Bandarra

Chrome 96 آزمایش معرفی ویژگی جدید را برای «زمینه تیره خودکار» در Android معرفی می‌کند. با این ویژگی، وقتی کاربر در سیستم‌عامل زمینه تیره را انتخاب کرده باشد، مرورگر زمینه تیره تولیدشده به‌طور خودکار را روی سایت‌های دارای زمینه روشن اعمال می‌کند. کاربران می‌توانند با غیرفعال کردن این گزینه در سطح سیستم‌عامل یا در تنظیمات خاصی در Chrome، از زمینه‌های تیره انصراف دهند.

ثبت‌نام برای آزمایش معرفی ویژگی جدید

همچنین می‌توانید الگوریتم تیره کردن را ازطریق آزمایش معرفی ویژگی جدید برای کاربران فعال کنید. این کار به شما امکان می‌دهد عملکرد «زمینه تیره خودکار» را دررابطه‌با شاخص‌های کلیدی عملکردتان آزمایش کنید.

برای آشنایی با نحوه راه‌اندازی آزمایش معرفی ویژگی جدید، به اسناد مراجعه کنید، سپس برای دریافت کد، در آزمایش معرفی ویژگی جدید AutoDarkMode ثبت‌نام کنید.

«زمینه تیره خودکار» را در دستگاهتان امتحان کنید

با DevTools

برای فعال کردن «زمینه تیره خودکار» در DevTools:

  1. روی منوِ سه‌نقطه‌ای کلیک کنید.
  2. ابزارهای بیشتر و سپس پرداز را انتخاب کنید.
  3. فعال کردن را در گزینه شبیه‌سازی حالت تاریک خودکار انتخاب کنید.

در تلفن Android

برای آزمایش کردن «زمینه تیره خودکار» در تلفن Android:

  1. به chrome://flags بروید و آزمایش #darken-websites-checkbox-in-theme-setting را فعال کنید.
  2. سپس، روی منوِ سه‌نقطه‌ای ضربه بزنید، تنظیمات و سپس زمینه را انتخاب کنید، و چارگوش اعمال کردن زمینه‌های تیره در سایت‌ها، درصورت امکان را علامت بزنید.

اکنون صفحه‌های روشن در تلفن تیره خواهند شد.

سفارشی‌سازی هر عنصر

هرچند هدف ما این است که «زمینه تیره خودکار» در همه موارد نتایج خوبی تولید کند، مکالمات اولیه با توسعه‌دهندگان نشان داد که آن‌ها مایلند عناصر خاصی را تغییر دهند تا با ظاهر و حس مطلوبشان بهتر سازگار شود.

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

درحال شناسایی زمینه تیره خودکار

برای تشخیص اینکه کاربر در «زمینه تیره خودکار» است یا نه، عنصری با background-color تنظیم‌شده روی canvas و آرایش رنگ‌ها تنظیم‌شده روی روشن ایجاد کنید. اگر رنگ محاسبه‌شده برای پس‌زمینه چیزی غیراز سفید (rgb(255, 255, 255)) باشد، «زمینه تیره خودکار» روی صفحه اعمال می‌شود.

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

سفارشی‌سازی کردن تعداد زیادی عنصر

اگر لازم باشد تعداد بیشتری از عناصر را سفارشی‌سازی کنید، مقیاس‌بندی راه‌حل بالا می‌تواند دشوار باشد. یک جایگزین این است که از تشخیص «زمینه تیره خودکار» برای افزودن کلاس نشانگر به بدنه صفحه استفاده کنید:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

سپس، از CSS برای سفارشی‌سازی عناصر درصورت نیاز استفاده کنید:

.auto-dark-theme > #my-element {
  border-color: red;
}

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

نحوه انصراف دادن از «زمینه تیره خودکار»

علاوه‌بر احترام به انتخاب کاربر در دستگاهش، زمینه تیره مزایایی مانند بهبود عمر باتری و دسترس‌پذیری را برای کاربران فراهم می‌کند. به‌جای انصراف از «زمینه تیره خودکار»، اکیداً توصیه می‌کنیم زمینه تیره منتخب خودتان را پیاده‌سازی کنید تا به اولویت کاربر احترام بگذارید و این مزایا را حفظ کنید.

بااین‌حال، در مواردی که پیاده‌سازی زمینه تیره خودتان امکان‌پذیر نیست، و نتیجه تولیدشده توسط «زمینه تیره خودکار» رضایت‌بخش نیست، می‌توانید از این ویژگی انصراف دهید،

استفاده از متا تگ

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

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

انصراف برای هر عنصر

راه دوم برای انصراف دادن، تنظیم مقدار ویژگی CSS color-scheme روی only light است. اگرچه می‌توان از انصراف برای هر عنصر برای انصراف کل صفحه از «حالت تاریک خودکار» استفاده کرد، مزیت این رویکرد این است که فقط امکان انصراف بخش‌های خاصی از صفحه را فراهم می‌کند:

#my-element {
  color-scheme: only light;
}

هنوز هم می‌توان از این رویکرد برای انصراف کل صفحه از «زمینه تیره خودکار» با تنظیم طرح رنگ در عنصر :root استفاده کرد:

:root {
  color-scheme: only light;
}

برای ما بازخورد ارسال کنید!

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

کانال‌های زیادی وجود دارد که می‌توانید بازخوردتان را برای ما ارسال کنید:

عکس از Félix Besombes.