ธีมมืดอัตโนมัติ

André Cipriani Bandarra

Chrome 96 เปิดตัวช่วงทดลองใช้จากต้นทางสำหรับธีมมืดอัตโนมัติใน Android ฟีเจอร์นี้ช่วยให้เบราว์เซอร์ใช้ธีมมืดที่สร้างขึ้นโดยอัตโนมัติกับเว็บไซต์ที่มีธีมสว่าง เมื่อผู้ใช้เลือกใช้ธีมมืดในระบบปฏิบัติการ ผู้ใช้สามารถเลือกไม่ใช้ธีมมืดได้โดยปิดใช้ตัวเลือกในระดับระบบปฏิบัติการหรือในการตั้งค่าเฉพาะใน Chrome

ลงชื่อสมัครใช้ช่วงทดลองใช้จากต้นทาง

นอกจากนี้ คุณยังเปิดใช้อัลกอริทึมการทำให้มืดสำหรับผู้ใช้ได้ผ่านช่วงทดลองใช้จากต้นทาง ซึ่งจะช่วยให้คุณทดสอบประสิทธิภาพของธีมมืดอัตโนมัติที่เกี่ยวข้องกับ KPI ได้

ไปที่เอกสารประกอบเพื่อดูวิธีตั้งค่าช่วงทดลองใช้จากต้นทาง จากนั้นลงชื่อสมัครใช้ช่วงทดลองใช้จากต้นทางของ AutoDarkMode เพื่อรับโทเค็น

ทดสอบธีมมืดอัตโนมัติในอุปกรณ์

โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บ

วิธีเปิดใช้ธีมมืดอัตโนมัติในเครื่องมือสำหรับนักพัฒนาเว็บ

  1. คลิกเมนู 3 จุด
  2. เลือกเครื่องมือเพิ่มเติม แล้วเลือกการแสดงผล
  3. เลือกเปิดใช้ในตัวเลือกจำลองโหมดมืดอัตโนมัติ

ในโทรศัพท์ Android

วิธีทดสอบธีมมืดอัตโนมัติในโทรศัพท์ Android

  1. ไปที่ chrome://flags แล้วเปิดใช้การทดสอบ #darken-websites-checkbox-in-theme-setting
  2. จากนั้นแตะเมนู 3 จุด เลือกการตั้งค่า แล้วเลือกธีม และเลือกช่องใช้ธีมมืดกับเว็บไซต์เมื่อเป็นไปได้

ตอนนี้หน้าเว็บที่มีสีสว่างจะเปลี่ยนเป็นสีเข้มในโทรศัพท์

การปรับแต่งตามองค์ประกอบ

แม้ว่าเราจะตั้งเป้าให้ธีมมืดอัตโนมัติสร้างผลลัพธ์ที่ดีในทุกกรณี แต่การพูดคุยกับนักพัฒนาแอปในช่วงแรกๆ บ่งชี้ว่านักพัฒนาแอปต้องการปรับแต่งองค์ประกอบที่เฉพาะเจาะจงเพื่อให้ปรับให้เข้ากับรูปลักษณ์ที่ต้องการได้ดียิ่งขึ้น

ในช่วงทดลองใช้จากต้นทางนี้ คุณสามารถปรับแต่งได้โดยใช้ JavaScript เพื่อตรวจหาว่าผู้ใช้อยู่ในธีมมืดอัตโนมัติหรือไม่ แล้วปรับแต่งองค์ประกอบที่ต้องการ

กำลังตรวจหาธีมมืดอัตโนมัติ

หากต้องการตรวจหาว่าผู้ใช้อยู่ในธีมมืดอัตโนมัติหรือไม่ ให้สร้างองค์ประกอบที่มี 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;
}

API การปรับแต่งต่อองค์ประกอบยังอยู่ในช่วงเริ่มต้นของการพัฒนา เรากำลังทำงานร่วมกับทีมมาตรฐานเพื่อให้นักพัฒนาแอปมี API ที่ชัดเจนยิ่งขึ้นสำหรับการเลือกไม่ใช้ คุณติดตามการสนทนาได้ในปัญหา GitHub นี้

วิธีเลือกไม่ใช้ธีมมืดอัตโนมัติ

นอกเหนือจากการเคารพตัวเลือกของผู้ใช้ในอุปกรณ์แล้ว ธีมมืดยังให้ประโยชน์แก่ผู้ใช้ เช่น การปรับปรุงอายุการใช้งานแบตเตอรี่และการช่วยเหลือพิเศษ แทนที่จะเลือกไม่ใช้ธีมมืดอัตโนมัติ เราขอแนะนำอย่างยิ่งให้ใช้ธีมมืดที่ดูแลจัดการเองแทน เพื่อเคารพค่ากำหนดของผู้ใช้และคงสิทธิประโยชน์เหล่านั้นไว้

อย่างไรก็ตาม ในกรณีที่ไม่สามารถใช้ธีมมืดของคุณเองได้ และผลลัพธ์ที่สร้างโดยธีมมืดอัตโนมัติไม่เป็นที่น่าพอใจ คุณสามารถเลือกไม่ใช้ฟีเจอร์นี้ได้

การใช้เมตาแท็ก

ทางเลือกแรกสำหรับการเลือกไม่ใช้ธีมมืดอัตโนมัติคือการเพิ่มเมตาแท็กต่อไปนี้ลงในส่วนหัวของหน้าเว็บ ข้อดีของการใช้เมตาแท็กคือจะป้องกันไม่ให้มีการใช้ธีมมืดอัตโนมัติเลย ซึ่งอาจทำให้เกิด "เนื้อหาที่มืดลงอย่างรวดเร็ว"

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

การเลือกไม่ใช้ต่อองค์ประกอบ

ทางเลือกที่ 2 สำหรับการเลือกไม่ใช้คือการตั้งค่าพร็อพเพอร์ตี้ CSS color-scheme เป็น only light แม้ว่าจะใช้การเลือกไม่ใช้ต่อองค์ประกอบเพื่อเลือกไม่ใช้โหมดมืดอัตโนมัติทั้งหน้าได้ แต่ข้อดีของวิธีนี้คือช่วยให้เลือกไม่ใช้เฉพาะบางส่วนของหน้าได้

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

คุณยังคงใช้วิธีนี้เพื่อเลือกไม่ใช้ธีมมืดอัตโนมัติทั้งหน้าได้โดยตั้งค่ารูปแบบสีในองค์ประกอบ :root ดังนี้

:root {
  color-scheme: only light;
}

โปรดส่งความคิดเห็นถึงเรา

เรายังคงระบุธีมมืดอัตโนมัติอยู่ และต้องการความคิดเห็นในทุกด้านของการใช้งาน ตั้งแต่ผลลัพธ์ของอัลกอริทึมการทำให้มืดไปจนถึง API ของนักพัฒนาแอปสำหรับการปรับแต่งองค์ประกอบและการเลือกไม่ใช้

คุณส่งความคิดเห็นถึงเราได้หลายช่องทาง ดังนี้

รูปภาพโดย Félix Besombes