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

André Cipriani Bandarra

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

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

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

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

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

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

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

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

ในโทรศัพท์ Android

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

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

ตอนนี้หน้าเว็บแบบสว่างจะมืดลงบนโทรศัพท์

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

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

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

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

หากต้องการตรวจจับว่าผู้ใช้ใช้โหมดมืดอัตโนมัติอยู่หรือไม่ ให้สร้างองค์ประกอบโดยตั้งค่า background-color เป็น canvas และตั้งค่ารูปแบบสีเป็น "light" หากสีที่คํานวณสําหรับพื้นหลังเป็นสีอื่นที่ไม่ใช่สีขาว (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

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

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

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

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

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

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

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

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

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

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

:root {
  color-scheme: only light;
}

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

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

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

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