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

อันเดร ซิปรีอานี่ บันดาร์รา

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>

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

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

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

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

:root {
  color-scheme: only light;
}

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

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

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

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