Chrome 96 ขอแนะนำช่วงทดลองใช้จากต้นทางสำหรับธีมมืดอัตโนมัติใน Android เมื่อใช้ฟีเจอร์นี้ เบราว์เซอร์จะใช้ธีมมืดที่สร้างขึ้นโดยอัตโนมัติกับเว็บไซต์ที่มีธีมสว่างเมื่อผู้ใช้เลือกใช้ธีมมืดในระบบปฏิบัติการ ผู้ใช้เลือกไม่ใช้ธีมมืดได้โดยปิดใช้ตัวเลือกในระดับระบบปฏิบัติการหรือในการตั้งค่าเฉพาะใน Chrome
ลงชื่อสมัครใช้ช่วงทดลองใช้จากต้นทาง
คุณยังเปิดใช้อัลกอริทึมการปรับแสงให้มืดสำหรับผู้ใช้ผ่านช่วงทดลองใช้จากต้นทางได้ด้วย ซึ่งจะช่วยให้คุณทดสอบประสิทธิภาพของธีมมืดอัตโนมัติโดยอิงตาม KPI ของคุณได้
ไปที่เอกสารประกอบเพื่อดู วิธีตั้งค่าช่วงทดลองใช้จากต้นทาง แล้วลงชื่อสมัครใช้ช่วงทดลองใช้ AutoDarkMode จากต้นทางเพื่อรับโทเค็น
ทดสอบธีมมืดอัตโนมัติในอุปกรณ์
พร้อมเครื่องมือสำหรับนักพัฒนาเว็บ
วิธีเปิดใช้ธีมมืดอัตโนมัติในเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกเมนู 3 จุด
- เลือกเครื่องมือเพิ่มเติม แล้วเลือกการแสดงผล
- เลือกเปิดใช้ในตัวเลือกจำลองโหมดมืดอัตโนมัติ
ในโทรศัพท์ Android
วิธีทดสอบธีมมืดอัตโนมัติในโทรศัพท์ Android
- ไปที่
chrome://flags
แล้วเปิดใช้การทดสอบ#darken-websites-checkbox-in-theme-setting
- จากนั้นแตะเมนู 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 สำหรับนักพัฒนาซอฟต์แวร์สำหรับการปรับแต่งองค์ประกอบและการเลือกไม่ใช้
คุณส่งความคิดเห็นถึงเราได้หลายช่องทางดังนี้
- ผ่านแบบสำรวจสำหรับนักพัฒนาซอฟต์แวร์
- การส่งข้อบกพร่องในโปรเจ็กต์ Chromium
- ผ่านแบบฟอร์มความคิดเห็นเกี่ยวกับช่วงทดลองใช้จากต้นทาง
รูปภาพโดย Félix Besombes