تم تاریک خودکار

آندره سیپریانی بندرا

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

برای آزمایش مبدا ثبت نام کنید

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

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

تم تاریک خودکار را روی دستگاه خود آزمایش کنید

با DevTools

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

  1. روی منوی سه نقطه کلیک کنید.
  2. گزینه More Tools و سپس Rendering را انتخاب کنید.
  3. گزینه Enable on Emulate auto dark mode را انتخاب کنید.

در یک گوشی اندرویدی

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

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

اکنون صفحات روشن روی گوشی تاریک می شوند.

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

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

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

تشخیص تم تاریک خودکار

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

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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;
}

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

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

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

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

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

اولین جایگزین برای انصراف از Auto Dark Theme این است که متا تگ زیر را به سربرگ صفحه خود اضافه کنید. مزیت استفاده از متا تگ این است که از اعمال تم تاریک خودکار به طور کلی جلوگیری می کند، که می تواند باعث "فلش محتوای تیره" شود.

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

انصراف از هر عنصر

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

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

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

:root {
  color-scheme: only light;
}

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

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

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

عکس از Félix Besombes .