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

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-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>

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

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

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

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

:root {
  color-scheme: only light;
}

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

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

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

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