ขาดใจหรือไม่จำเป็นใช่ไหม ดูข้อมูลทุกอย่างเกี่ยวกับโหมดมืดและวิธีสนับสนุนโหมดนี้ให้เป็นประโยชน์กับผู้ใช้ของคุณ
บทนำ
โหมดมืดก่อนโหมดมืด
เราได้ใช้งานโหมดมืดแล้ว ในยุคแห่งการประมวลผลส่วนบุคคล โหมดมืดไม่ใช่เรื่องง่าย แต่ความจริงก็คือ จอคอมพิวเตอร์แบบโมโนโครม CRT ทำงานโดยการยิงลำแสงอิเล็กตรอน บนหน้าจอฟอสฟอเรสเซนต์และฟอสเฟอร์ที่ใช้ใน CRT แรกเริ่มเป็นสีเขียว เนื่องจากข้อความแสดงเป็นสีเขียวและส่วนอื่นๆ ของหน้าจอเป็นสีดำ โมเดลเหล่านี้จึงมักถูกเรียกกันว่า หน้าจอสีเขียว
CRT สีที่แนะนำในเวลาต่อมาจะแสดงหลายสี ผ่านการใช้ฟอสเฟอร์สีแดง เขียว และน้ำเงิน โมเดลสร้างสีขาวด้วยการเปิดใช้งานฟอสเฟอร์ทั้ง 3 ตัวพร้อมกัน เมื่อถือกำเนิดของ WYSIWYG ที่ซับซ้อนยิ่งขึ้น การเผยแพร่บนเดสก์ท็อป ความคิดที่จะทำให้เอกสารเสมือนจริงมีลักษณะคล้ายแผ่นกระดาษกลายเป็นที่นิยม
ซึ่งเริ่มมืดบนขาวเป็นเทรนด์การออกแบบ และเทรนด์นี้ยังติดมาด้วย เว็บที่ทำงานในเอกสารเป็นหลัก เบราว์เซอร์แรก WorldWideWeb (อย่าลืมว่า ยังไม่มีการสร้าง CSS เลย) หน้าเว็บที่แสดงด้วยวิธีนี้ เรื่องน่ารู้: เบราว์เซอร์ตัวที่ 2 เบราว์เซอร์โหมดบรรทัด เบราว์เซอร์ที่ใช้เทอร์มินัล สีเขียวบนสีเข้ม ปัจจุบันหน้าเว็บและเว็บแอปมักออกแบบด้วยข้อความสีเข้ม บนพื้นหลังสีอ่อน เป็นสมมติฐานพื้นฐานที่มีฮาร์ดโค้ดในสไตล์ชีต User Agent ซึ่งรวมถึง ของ Chrome
ยุคสมัยของ CRT นั้นผ่านไปนานแล้ว การบริโภคและการสร้างคอนเทนต์เปลี่ยนไปเป็นอุปกรณ์เคลื่อนที่ ที่ใช้ LCD แบบเรืองแสง หรือหน้าจอ AMOLED ที่ช่วยประหยัดพลังงาน คอมพิวเตอร์ แท็บเล็ต และสมาร์ทโฟนขนาดเล็กและขนส่งได้ง่ายกว่าทำให้เกิดรูปแบบการใช้งานใหม่ๆ งานยามว่าง เช่น การท่องเว็บ การเขียนโค้ดเพื่อความสนุก และเกมระดับไฮเอนด์ มักเกิดขึ้นหลังเวลาทำการในสภาพแวดล้อมที่มีแสงสลัว ผู้คนยังเพลิดเพลินกับการใช้อุปกรณ์บนเตียงในตอนกลางคืนด้วย ยิ่งผู้คนใช้อุปกรณ์ของพวกเขามากขึ้นในที่มืด แนวคิดการย้อนกลับไปสู่รากของแสงในที่มืดจึงได้รับความนิยมมากขึ้นเท่านั้น
ทำไมต้องใช้โหมดมืด
โหมดมืดเพื่อความสวยงาม
เมื่อมีคนถาม ทำไมถึงชอบหรือต้องการโหมดมืด คำตอบที่ได้รับความนิยมมากที่สุดคือ "ดูง่ายขึ้น" ตามด้วย "สวยและสวยมาก" แอปเปิ้ลใน เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ในโหมดมืด เขียนอย่างชัดแจ้ง: "การเลือกว่าจะเปิดใช้ฟีเจอร์สว่างหรือมืด เป็นการตั้งค่าที่ให้ความสวยงามสำหรับผู้ใช้ส่วนใหญ่ และอาจไม่เกี่ยวข้องกับสภาพแสงแวดล้อม"
โหมดมืดเป็นเครื่องมือช่วยเหลือพิเศษ
นอกจากนี้ยังมีผู้ที่ต้องใช้โหมดมืดจริงๆ และใช้เป็นเครื่องมือช่วยเหลือพิเศษอีกอย่าง ตัวอย่างเช่น ผู้ใช้ที่มองเห็นเลือนลาง เครื่องมือช่วยเหลือพิเศษแรกสุดที่ผมพบคือ ฟีเจอร์ CloseView ของ System 7 ซึ่งมีปุ่มเปิด/ปิดสำหรับ Black on White และ White on Black อินเทอร์เฟซผู้ใช้เริ่มต้นยังคงเป็นสีขาวดำแม้ระบบเวอร์ชัน 7 จะรองรับสี
การใช้งานแบบกลับทางเหล่านี้แสดงจุดอ่อนเมื่อเปิดตัวสี การศึกษาวิจัยผู้ใช้โดย Szpiro และคณะ เมื่อ วิธีที่ผู้ที่สายตาเลือนรางเข้าถึงอุปกรณ์คอมพิวเตอร์ แสดงให้เห็นว่าผู้ใช้ที่ให้สัมภาษณ์ทั้งหมดไม่ชอบรูปภาพกลับสี แต่หลายคนกลับชอบข้อความสีอ่อนบนพื้นหลังสีเข้ม Apple รองรับความต้องการของผู้ใช้นี้ด้วยฟีเจอร์ชื่อ Smart Invert ซึ่งจะกลับสีบนจอแสดงผล ยกเว้นรูปภาพ สื่อ และบางแอปที่ใช้รูปแบบสีเข้ม
ภาวะสายตาเลือนรางชนิดพิเศษคือภาวะคอมพิวเตอร์วิทัศน์ หรือที่เรียกว่าการปวดตาแบบดิจิทัล ซึ่งเป็น กำหนด ว่า "ปัญหาทั้งด้านสายตาและการมองเห็นที่เกี่ยวข้องกับการใช้คอมพิวเตอร์ (รวมถึงเดสก์ท็อป แล็ปท็อป และแท็บเล็ต) และจอแสดงผลอิเล็กทรอนิกส์อื่นๆ (เช่น สมาร์ทโฟนและอุปกรณ์อ่านอิเล็กทรอนิกส์)" ระบบเสนอแล้ว การที่วัยรุ่นใช้อุปกรณ์อิเล็กทรอนิกส์ โดยเฉพาะในเวลากลางคืน ทำให้มีความเสี่ยงมากขึ้นที่จะมีระยะเวลาการนอนหลับสั้น เวลาในการตอบสนองที่นานขึ้นและการนอนไม่เพียงพอ นอกจากนี้ การสัมผัสกับแสงสีฟ้าบน รายงานแล้ว ที่เกี่ยวข้องในการออกกฎระเบียบ จังหวะเซอร์คาเดียน และวงจรการนอนหลับ และสภาพแวดล้อมที่มีแสงไม่สม่ำเสมอ อาจนำไปสู่การอดนอน อาจส่งผลต่ออารมณ์และประสิทธิภาพของงาน ตามข้อมูลจาก งานวิจัยของ Rosenfield เพื่อจำกัดผลกระทบเชิงลบดังกล่าว โดยการลดแสงสีฟ้าด้วยการปรับอุณหภูมิสีของจอแสดงผล ผ่านคุณลักษณะอย่าง iOS" Night Shift หรือของ Android แสงตอนกลางคืนช่วยคุณได้ รวมทั้งหลีกเลี่ยงแสงจ้าหรือแสงผิดปกติโดยทั่วไปด้วยธีมมืดหรือโหมดมืด
โหมดมืดประหยัดพลังงานในหน้าจอ AMOLED
ในที่สุดก็ทราบว่าโหมดมืดช่วยประหยัดพลังงานได้มาก หน้าจอ AMOLED กรณีศึกษาของ Android ที่เน้นแอป Google ยอดนิยม อย่าง YouTube แสดงให้เห็นว่าการประหยัดพลังงานได้ถึง 60% วิดีโอด้านล่างมีรายละเอียดเพิ่มเติมเกี่ยวกับกรณีศึกษาเหล่านี้และการประหยัดพลังงานต่อแอป
กำลังเปิดใช้งานโหมดมืดในระบบปฏิบัติการ
เราได้อธิบายความเป็นมาว่าทำไมโหมดมืดจึงเป็นเรื่องสำคัญสำหรับผู้ใช้จำนวนมากไปแล้ว มาดูวิธีช่วยกัน
ระบบปฏิบัติการที่รองรับโหมดมืดหรือธีมมืด ซึ่งมักจะมีตัวเลือกให้เปิดใช้งานในการตั้งค่า ใน macOS X ไฟล์จะอยู่ในส่วนทั่วไปของค่ากำหนดของระบบ ซึ่งเรียกว่าลักษณะที่ปรากฏ (ภาพหน้าจอ) และใน Windows 10 จะอยู่ในส่วน Colors ไปตามส่วน Select your color (ภาพหน้าจอ) สําหรับ Android Q คุณจะเห็นสวิตช์ในส่วนการแสดงผลเป็นสวิตช์เปิด/ปิดธีมมืด (ภาพหน้าจอ) และใน iOS 13 คุณเปลี่ยนลักษณะที่ปรากฏได้ในจอแสดงผลและ ความสว่าง ของการตั้งค่า (ภาพหน้าจอ)
คิวรี่สื่อ prefers-color-scheme
ขอทฤษฏีช่วงสุดท้ายก่อนจะเริ่มลงมือ
คำค้นหาสื่อ
อนุญาตให้ผู้เขียนทดสอบและค้นหาค่าหรือฟีเจอร์ของ User Agent หรืออุปกรณ์แสดงผล
โดยไม่ขึ้นอยู่กับเอกสารที่แสดงผล
ซึ่งจะใช้ในกฎ CSS @media เพื่อใช้รูปแบบกับเอกสารอย่างมีเงื่อนไข
และในบริบทและภาษาอื่นๆ อีก เช่น HTML และ JavaScript
คำค้นหาสื่อระดับ 5
นำเสนอฟีเจอร์สื่อที่ผู้ใช้ชื่นชอบ ซึ่งก็คือ
วิธีที่ไซต์ตรวจหาวิธีแสดงเนื้อหาที่ผู้ใช้ต้องการ
prefers-color-scheme
ฟีเจอร์สื่อจะใช้เพื่อตรวจหา
หากผู้ใช้ขอให้หน้าเว็บใช้ธีมสีอ่อนหรือสีเข้ม
โดยใช้ได้กับค่าต่อไปนี้
light: ระบุว่าผู้ใช้ได้แจ้งระบบว่าต้องการหน้าที่มีธีมสว่าง (ข้อความสีเข้มบนพื้นหลังสีอ่อน)dark: ระบุว่าผู้ใช้ได้แจ้งระบบว่าพวกเขาต้องการหน้าที่มีธีมมืด (ข้อความสีอ่อนบนพื้นหลังสีเข้ม)
การรองรับโหมดมืด
ดูว่าเบราว์เซอร์รองรับโหมดมืดหรือไม่
เนื่องจากมีการรายงานโหมดมืดผ่านการค้นหาสื่อ คุณจึงตรวจสอบได้ง่ายๆ ว่าเบราว์เซอร์ปัจจุบัน
รองรับโหมดมืดโดยตรวจสอบว่าคำค้นหาสื่อ prefers-color-scheme ตรงกันหรือไม่
ระบุว่าฉันจะไม่ได้รวมค่าใดๆ ไว้ แต่ให้ตรวจสอบว่าคำค้นหาสื่อเพียงอย่างเดียวตรงกันหรือไม่
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
ในขณะที่เขียนอีเมล เรารองรับ prefers-color-scheme ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ (หากมีให้ใช้งาน)
โดย Chrome และ Edge ตั้งแต่เวอร์ชัน 76, Firefox ตั้งแต่เวอร์ชัน 67 เป็นต้นไป
และ Safari ใน macOS เวอร์ชัน 12.1 และเวอร์ชัน 13 ใน iOS
สำหรับเบราว์เซอร์อื่นๆ ทั้งหมด ให้ดูที่ฉันใช้ตารางการสนับสนุนได้หรือไม่
การเรียนรู้เกี่ยวกับค่ากำหนดของผู้ใช้ ณ เวลาที่ขอ
ส่วนหัวคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Color-Scheme
ทำให้เว็บไซต์รับค่ากำหนดรูปแบบสีของผู้ใช้ได้ (ไม่บังคับ) เมื่อส่งคำขอ
ทำให้เซิร์ฟเวอร์แทรก CSS ที่ถูกต้องในหน้าและหลีกเลี่ยงธีมสีที่ไม่ถูกต้องแฟลช
โหมดมืดในการใช้งานจริง
มาดูกันว่าในความเป็นจริงรองรับโหมดมืดอย่างไรบ้าง เช่นเดียวกับที่ Highlander เมื่อใช้โหมดมืด จะมีได้โหมดเดียวคือมืดหรือสว่าง แต่ไม่ใช่ทั้ง 2 อย่างนะ เหตุใดฉันจึงพูดถึงสิ่งนี้ เนื่องจากข้อเท็จจริงนี้ควรส่งผลต่อกลยุทธ์การโหลด โปรดอย่าบังคับให้ผู้ใช้ดาวน์โหลด CSS ในเส้นทางการแสดงผลวิกฤติ ในโหมดที่บุคคลนั้นไม่ได้ใช้ในปัจจุบัน ฉันจึงได้แยก CSS สำหรับแอปตัวอย่างเพื่อเพิ่มความเร็วในการโหลด ซึ่งจะแสดงคำแนะนำต่อไปนี้ในเชิงปฏิบัติ ออกเป็น 3 ส่วนเพื่อเลื่อนเวลา CSS ที่ไม่สำคัญออกไป ดังนี้
style.cssที่มีกฎทั่วไปซึ่งใช้กันโดยทั่วไปในเว็บไซต์dark.cssที่มีเฉพาะกฎที่จำเป็นสำหรับโหมดมืดlight.cssที่มีเฉพาะกฎที่จำเป็นสำหรับโหมดสว่าง
กลยุทธ์การโหลด
โปรแกรมหลัง 2 รายการคือ light.css และ dark.css
โหลดอย่างมีเงื่อนไขด้วยคำค้นหา <link media>
ในตอนแรก
เบราว์เซอร์บางประเภทจะไม่รองรับ prefers-color-scheme
(ตรวจพบได้โดยใช้รูปแบบด้านบน)
ที่ฉันจัดการแบบไดนามิกโดยการโหลดไฟล์ light.css เริ่มต้น
ผ่านองค์ประกอบ <link rel="stylesheet"> ที่แทรกอย่างมีเงื่อนไขในสคริปต์แบบอินไลน์ขนาดเล็ก
(ใช้แสงเป็นตัวเลือกเองก็ได้ หรือฉันอาจปรับให้โหมดสำรองเริ่มต้นเป็นธีมมืดก็ได้)
หากต้องการหลีกเลี่ยงเนื้อหาที่ไม่มีการจัดรูปแบบอย่างรวดเร็ว
ฉันซ่อนเนื้อหาของหน้าเว็บไว้จนกว่า light.css จะโหลด
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
rel="stylesheet"
href="/light.css"
media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
สถาปัตยกรรมสไตล์ชีต
ฉันใช้ประโยชน์จากตัวแปร CSS ได้มากที่สุด
การดำเนินการนี้จะทำให้ style.css ทั่วไปของฉันเป็น
และการปรับแต่งโหมดสว่างหรือมืดทั้งหมดจะเกิดขึ้นในไฟล์อีก 2 ไฟล์ ได้แก่ dark.css และ light.css
คุณสามารถดูข้อความที่ตัดตอนมาจากรูปแบบจริงได้ที่ด้านล่าง แต่ก็น่าจะเพียงพอสำหรับสื่อถึงแนวคิดโดยรวมได้
ฉันประกาศตัวแปร 2 รายการคือ --color และ --background-color
ซึ่งเป็นการสร้างธีมพื้นฐานแบบมืดบนแสงและแสงในที่มืด
/* light.css: 👉 dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
ใน style.css แล้วใช้ตัวแปรเหล่านี้ในกฎ body { … }
ตามที่ระบุไว้ใน
:root CSS Pseudo-class -
ตัวเลือกที่ใน HTML แสดงถึงองค์ประกอบ <html>
และเหมือนกับตัวเลือก html ยกเว้นความจำเพาะเจาะจงคือ
จะเรียงตามลำดับลงมา ซึ่งใช้ได้สำหรับการประกาศตัวแปร CSS ร่วม
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
ในตัวอย่างโค้ดข้างต้น คุณอาจสังเกตเห็นพร็อพเพอร์ตี้
color-scheme
ด้วยค่า light dark ที่คั่นด้วยช่องว่าง
ข้อมูลนี้จะบอกเบราว์เซอร์ว่าธีมสีใดที่แอปของฉันรองรับ
และอนุญาตให้เปิดใช้ตัวแปรพิเศษของสไตล์ชีต User Agent
ซึ่งมีประโยชน์ เช่น ให้เบราว์เซอร์แสดงผลฟิลด์ของแบบฟอร์ม
ที่มีพื้นหลังสีเข้มและข้อความสีอ่อน ให้ปรับแถบเลื่อน
หรือเปิดใช้สีไฮไลต์ที่รับรู้ธีมได้
รายละเอียดที่แน่นอนของ color-scheme ระบุไว้ใน
โมดูลการปรับสี CSS ระดับ 1
ที่เหลือก็แค่กำหนดตัวแปร CSS
เกี่ยวกับสิ่งที่สำคัญในเว็บไซต์ของฉัน
การจัดระเบียบรูปแบบอย่างมีความหมายจะช่วยคุณได้มากเมื่อใช้โหมดมืด
เช่น ลองเรียกใช้ตัวแปร ไม่ใช่ --highlight-yellow
--accent-color เป็น "สีเหลือง" อาจไม่เป็นสีเหลืองในโหมดมืด หรือกลับกัน
ด้านล่างนี้เป็นตัวอย่างตัวแปรอื่นๆ ที่ฉันใช้ในตัวอย่าง
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
ตัวอย่างแบบเต็ม
ในการฝัง Glitch ต่อไปนี้ คุณจะเห็นตัวอย่างทั้งหมดที่นำ แนวคิดจากด้านบนไปใช้งานจริง ลองสลับโหมดมืดในการตั้งค่าระบบปฏิบัติการของคุณ และดูว่าหน้าเว็บมีการตอบสนองอย่างไร
กำลังโหลดผลกระทบ
เมื่อเล่นกับตัวอย่างนี้ คุณจะเห็น
เหตุใดฉันจึงโหลด dark.css และ light.css ผ่านคิวรี่สื่อ
ลองสลับเป็นโหมดมืดแล้วโหลดหน้านี้ซ้ำ
สไตล์ชีตที่ไม่ตรงกันในปัจจุบันจะยังคงโหลด แต่มีลำดับความสำคัญต่ำสุด
เพื่อให้ไม่ต้องแข่งขันกับทรัพยากรที่เว็บไซต์ต้องการในขณะนี้
prefers-color-scheme จะโหลด CSS โหมดมืดที่มีลำดับความสำคัญต่ำสุดการแสดงความรู้สึกต่อการเปลี่ยนแปลงโหมดมืด
คุณสมัครรับข้อมูลการเปลี่ยนแปลงโหมดมืดผ่าน JavaScript ได้เช่นเดียวกับการเปลี่ยนคำค้นหาสื่ออื่นๆ
คุณสามารถใช้วิธีนี้เพื่อเปลี่ยนการตั้งค่า
ไอคอน Fav
ของหน้าเว็บหรือเปลี่ยน
<meta name="theme-color">
ซึ่งกำหนดสีของแถบ URL ใน Chrome
ตัวอย่างแบบเต็มข้างต้นแสดงการทำงานจริง
หากต้องการดูการเปลี่ยนแปลงสีธีมและไอคอน Fav ให้เปิด
วิดีโอสาธิตในแท็บใหม่
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});
ใน Chromium 93 และ Safari 15 คุณสามารถปรับสีตาม
การค้นหาสื่อที่มีแอตทริบิวต์ media ขององค์ประกอบสีธีม meta
ระบบจะเลือกข้อความแรกที่ตรงกัน เช่น คุณอาจมีสีเดียวสำหรับ
โหมดสว่างและอีกโหมดหนึ่งสำหรับโหมดมืด ในขณะที่เขียน คุณจะไม่สามารถ
ให้ระบุไฟล์เหล่านั้นในไฟล์ Manifest ดู w3c/manifest#975 GitHub
ปัญหา
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
การแก้ไขข้อบกพร่องและทดสอบโหมดมืด
การจำลอง prefers-color-scheme ในเครื่องมือสำหรับนักพัฒนาเว็บ
การเปลี่ยนรูปแบบสีของระบบปฏิบัติการทั้งหมดอาจกลายเป็นเรื่องน่ารำคาญอย่างรวดเร็ว
ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จึงช่วยให้คุณจำลองรูปแบบสีที่ผู้ใช้ต้องการได้แล้ว
ในลักษณะที่ส่งผลต่อแท็บที่ปรากฏอยู่ในปัจจุบันเท่านั้น
เปิดเมนูคำสั่ง เริ่มพิมพ์ Rendering เรียกใช้คำสั่ง Show Rendering แล้วเปลี่ยนตัวเลือกจำลองฟีเจอร์สื่อ CSS Preferreds-color-scheme
กำลังจับภาพหน้าจอ prefers-color-scheme ด้วย Puppeteer
Puppeteer เป็นไลบรารี Node.js
ซึ่งมี API ระดับสูงเพื่อควบคุม Chrome หรือ Chromium ใน
โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ
สำหรับ dark-mode-screenshot เรามี
สคริปต์ Puppeteer ที่ให้คุณสร้างภาพหน้าจอของหน้าเว็บทั้งในโหมดมืดและโหมดสว่าง
คุณสามารถเรียกใช้สคริปต์นี้เป็นแบบครั้งเดียว หรือทำให้สคริปต์เป็นส่วนหนึ่งของ
ชุดทดสอบ Continuous Integration (CI)
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
แนวทางปฏิบัติแนะนำสำหรับโหมดมืด
หลีกเลี่ยงสีขาวล้วน
รายละเอียดเล็กๆ น้อยๆ ที่คุณอาจสังเกตเห็นคือฉันไม่ได้ใช้สีขาวล้วน
แต่เพื่อป้องกันการเรืองแสงและเลือดไหลออกจากเนื้อหาที่มืดโดยรอบ
ฉันเลือกสีขาวที่เข้มขึ้นเล็กน้อย บางอย่าง เช่น rgb(250, 250, 250) ทำงานได้ดี
ปรับสีและปรับรูปภาพให้มืดลง
หากคุณเปรียบเทียบภาพหน้าจอ 2 ภาพด้านล่างนี้ คุณจะเห็นว่าไม่เพียงแค่ธีมหลักเท่านั้นที่เปลี่ยนแปลงไป ตั้งแต่โหมดมืดในแสงไปจนถึงโหมดสว่างในธีมมืด แต่รูปภาพหลักจะดูแตกต่างไปเล็กน้อยด้วย การศึกษาวิจัยผู้ใช้ของฉัน แสดงให้เห็นว่าประชากรส่วนใหญ่ในแบบสำรวจ ต้องการภาพที่สดใสและสว่างน้อยลงเล็กน้อยเมื่อใช้โหมดมืด เราเรียกตัวเลือกนี้ว่าการเปลี่ยนสี
การเปลี่ยนสีสามารถทำได้ผ่านตัวกรอง CSS ในรูปภาพของฉัน
ฉันใช้ตัวเลือก CSS ที่ตรงกับรูปภาพทั้งหมดที่ไม่มี .svg ใน URL
ความคิดที่ว่าฉันสามารถให้กราฟิกเวกเตอร์ (ไอคอน) จัดการกับการทำสีใหม่ที่ต่างออกไปได้
ของฉัน (รูปภาพ) ลองดูข้อมูลเพิ่มเติมในย่อหน้าถัดไป
โปรดสังเกตวิธีที่ฉันใช้ตัวแปร CSS อีกครั้ง
เพื่อที่จะเปลี่ยนตัวกรองในภายหลังได้อย่างยืดหยุ่น
เนื่องจากต้องเปลี่ยนสีเฉพาะในโหมดมืดเท่านั้น ซึ่งก็คือเมื่อ dark.css ทำงานอยู่
ไม่มีกฎที่เกี่ยวข้องใน light.css
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
การปรับแต่งความเข้มของการเปลี่ยนสีในโหมดมืดด้วย JavaScript
แต่ละคนไม่เหมือนกันและแต่ละคนก็มีความต้องการโหมดมืดที่ไม่เหมือนกัน
การยึดปฏิบัติตามวิธีการปรับสีใหม่ตามที่อธิบายไว้ข้างต้น
ฉันสามารถทำให้ความเข้มของโทนสีเทาเป็นที่ต้องการของผู้ใช้ได้
เปลี่ยนผ่าน JavaScript
และเมื่อตั้งค่าเป็น 0% ฉันก็ปิดใช้การให้สีอีกครั้งโดยสมบูรณ์ได้ด้วย
โปรดทราบว่า document.documentElement
ให้การอ้างอิงไปยังองค์ประกอบรากของเอกสาร
ซึ่งก็คือ องค์ประกอบเดียวกับที่ผมสามารถอ้างอิงด้วย
:root CSS Pseudo-class
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
สลับกราฟิกและไอคอนแบบเวกเตอร์
สำหรับกราฟิกเวกเตอร์ ซึ่งในกรณีของฉันใช้เป็นไอคอนที่ฉันอ้างอิงผ่านองค์ประกอบ <img>
ให้ใช้วิธีการเปลี่ยนสีแบบอื่นๆ
ขณะที่การวิจัยแสดงให้เห็นว่า
คนส่วนใหญ่ไม่ชอบ การกลับรูปภาพ ใช้ได้ผลดีกับไอคอนส่วนใหญ่
ขอย้ำอีกครั้งว่าฉันใช้ตัวแปร CSS เพื่อระบุจำนวนการกลับ
ในสถานะปกติและใน:hover
ดูว่าฉันสลับเฉพาะไอคอนใน dark.css แต่ไม่สลับใน light.css และวิธี :hover
ได้รับความเข้มของการกลับต่างกันใน 2 กรณีเพื่อให้ไอคอนปรากฏ
มืดเล็กน้อยหรือสว่างขึ้นเล็กน้อย ขึ้นอยู่กับโหมดที่ผู้ใช้เลือก
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*='.svg'] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
filter: var(--icon-filter_hover);
}
ใช้ currentColor สําหรับ SVG ในบรรทัด
สําหรับรูปภาพ SVG ในบรรทัดแทนการใช้ฟิลเตอร์การกลับด้าน
คุณสามารถใช้currentColor
คีย์เวิร์ด CSS ที่แสดงค่าพร็อพเพอร์ตี้ color ขององค์ประกอบ
ซึ่งทำให้สามารถใช้ค่า color ในพร็อพเพอร์ตี้ที่ไม่ได้รับค่าดังกล่าวโดยค่าเริ่มต้น
เพื่อความสะดวก ถ้าใช้ currentColor เป็นค่าของ SVG
แอตทริบิวต์ fill หรือ stroke
แต่จะใช้ค่าจากค่าที่รับช่วงมาของคุณสมบัติสีแทน
ยิ่งไปกว่านั้น วิธีนี้เหมาะสำหรับ
<svg><use href="…"></svg>
เพื่อให้คุณมีแหล่งข้อมูลแยกกัน
และ currentColor จะยังคงมีผลในบริบท
โปรดทราบว่าวิธีนี้ใช้ได้เฉพาะกับ SVG แบบ inline หรือ <use href="…">
แต่ไม่ใช่ SVG ที่มีการกล่าวถึงเป็น src ของรูปภาพหรือผ่าน CSS
คุณดูข้อมูลนี้ได้จากการสาธิตด้านล่าง
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
สลับระหว่างโหมดต่างๆ ได้ราบรื่น
คุณสามารถเปลี่ยนจากโหมดมืดเป็นโหมดสว่างหรือปรับให้เรียบเนียนได้ด้วย
ว่าทั้ง color และ background-color
คุณสมบัติ CSS ที่เคลื่อนไหวได้
การสร้างภาพเคลื่อนไหวนั้นง่ายพอๆ กับการประกาศ transition 2 รายการสำหรับพร็อพเพอร์ตี้ทั้ง 2 รายการ
ตัวอย่างด้านล่างแสดงแนวคิดโดยรวม คุณสามารถสัมผัสประสบการณ์การใช้งานจริงได้ใน
การสาธิต
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(
--duration
) var(--timing);
}
ทิศทางศิลปะด้วยโหมดมืด
แม้ว่าโดยทั่วไปแล้วจะมีเหตุผลด้านประสิทธิภาพในการโหลด แต่เราขอแนะนําให้ทํางานร่วมกับ prefers-color-scheme โดยเฉพาะ
ในแอตทริบิวต์ media ขององค์ประกอบ <link> (แทนที่จะแทรกในบรรทัดในสไตล์ชีต)
มีสถานการณ์ที่คุณควรทำงานกับ prefers-color-scheme ในบรรทัดโดยตรงในโค้ด HTML
การกำกับศิลป์จึงเป็นสถานการณ์เช่นนี้
การชี้นำงานศิลปะบนเว็บเกี่ยวข้องกับรูปลักษณ์โดยรวมของหน้าเว็บ และวิธีการสื่อสารด้วยภาพ
จะช่วยกระตุ้นอารมณ์ สร้างความแตกต่างระหว่างคุณลักษณะ และดึงดูดความสนใจทางจิตใจของกลุ่มเป้าหมาย
เมื่อใช้โหมดมืด นักออกแบบจะเป็นผู้ตัดสินว่าภาพใดดีที่สุดในโหมดใดโหมดหนึ่ง
และการเปลี่ยนสีรูปภาพอาจจะไม่ดีพอหรือไม่
หากใช้กับองค์ประกอบ <picture> <source> ของรูปภาพที่จะแสดงจะอิงตามแอตทริบิวต์ media ได้
ในตัวอย่างด้านล่าง ฉันแสดงซีกโลกตะวันตกในโหมดมืด และซีกโลกตะวันออกในโหมดสว่าง
หรือเมื่อไม่มีค่ากำหนด ค่าเริ่มต้นจะเป็นซีกโลกตะวันออกในกรณีอื่นๆ ทั้งหมด
ขั้นตอนนี้มีไว้เพื่อการอธิบายเท่านั้น
สลับโหมดมืดในอุปกรณ์เพื่อดูความแตกต่าง
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)" />
<source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
<img src="eastern.webp" />
</picture>
โหมดมืด แต่เพิ่มการเลือกไม่ใช้
ดังที่กล่าวไว้ในส่วนทำไมต้องโหมดมืดด้านบน
โหมดมืดคือทางเลือกด้านความสวยงามสำหรับผู้ใช้ส่วนใหญ่
ดังนั้น ผู้ใช้บางรายอาจต้องการให้มี UI ของระบบปฏิบัติการของตนเอง
แต่ยังคงต้องการดูหน้าเว็บอย่างที่เคยเห็น
รูปแบบที่ดีคือการปฏิบัติตามสัญญาณที่เบราว์เซอร์ส่งผ่านในช่วงแรก
prefers-color-scheme แต่หากต้องการอนุญาตให้ผู้ใช้ลบล้างการตั้งค่าในระดับระบบ
องค์ประกอบที่กำหนดเองของ <dark-mode-toggle>
แน่นอนว่าคุณสามารถสร้างโค้ดสำหรับขั้นตอนนี้ได้ด้วยตัวเอง แต่คุณยังสามารถใช้
องค์ประกอบที่กำหนดเองแบบสำเร็จรูป (คอมโพเนนต์เว็บ) ซึ่งผมสร้างขึ้นเพื่อวัตถุประสงค์นี้
ชื่อ <dark-mode-toggle>
และจะเพิ่มปุ่มสลับ (โหมดมืด: เปิด/ปิด) หรือ
เครื่องมือสลับธีม (ธีม: สว่าง/มืด) ไปยังหน้าเว็บที่คุณปรับแต่งได้ทั้งหมด
การสาธิตด้านล่างแสดงการทำงานขององค์ประกอบดังกล่าว
(และฉันยัง 🤫 แอบดูแบบเงียบๆ ไว้ทุกอย่างด้วยนะ
อื่นๆ
ตัวอย่าง
ด้านบน)
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
<dark-mode-toggle> ในโหมดสว่าง
<dark-mode-toggle> ในโหมดมืด
ลองคลิกหรือแตะตัวควบคุมโหมดมืดที่มุมบนขวาในการสาธิตด้านล่าง หากคุณเลือกช่องทำเครื่องหมายในตัวควบคุมที่สามและสี่ ให้ดูวิธีการเลือกโหมด แม้ว่าจะโหลดหน้าเว็บซ้ำแล้วก็ตาม วิธีนี้จะช่วยให้ผู้เข้าชมใช้ระบบปฏิบัติการในโหมดมืดได้ แต่อย่าลืมดูเว็บไซต์ของคุณในโหมดสว่าง หรือในทางกลับกันด้วย
บทสรุป
การใช้งานและรองรับโหมดมืดนั้นเป็นเรื่องสนุกและได้ค้นพบแนวทางใหม่ๆ ในการออกแบบด้วย
สำหรับผู้เข้าชมบางส่วน อาจแตกต่างไประหว่างการไม่สามารถจัดการเว็บไซต์ของคุณ
และการเป็นผู้ใช้ที่มีความสุข
มีข้อผิดพลาดบางอย่างเกิดขึ้นและจำเป็นต้องทดสอบอย่างระมัดระวัง
แต่โหมดมืดเป็นโอกาสที่ดีในการแสดงให้เห็นว่า
คุณให้ความสำคัญกับผู้ใช้ทุกคน
แนวทางปฏิบัติที่ดีที่สุดที่กล่าวถึงในโพสต์นี้และผู้ช่วย เช่น
องค์ประกอบที่กำหนดเอง <dark-mode-toggle>
จะช่วยให้คุณมั่นใจได้ถึงความสามารถในการสร้างประสบการณ์โหมดมืดที่น่าทึ่ง
แจ้งให้ฉันทราบทาง Twitter ว่าคุณสร้างอะไร และโพสต์นี้เป็นประโยชน์หรือไม่
หรือข้อเสนอแนะในการปรับปรุง
ขอขอบคุณที่อ่าน 🌒
ลิงก์ที่เกี่ยวข้อง
ทรัพยากรสำหรับคิวรี่สื่อ prefers-color-scheme:
แหล่งข้อมูลสำหรับเมตาแท็ก color-scheme และพร็อพเพอร์ตี้ CSS:
- พร็อพเพอร์ตี้ CSS
color-schemeและเมตาแท็ก - หน้าสถานะแพลตฟอร์ม Chrome
- ข้อบกพร่อง Chromium
- ข้อมูลจำเพาะของโมดูลการปรับสี CSS ระดับ 1
- ปัญหา CSS WG GitHub สำหรับเมตาแท็กและพร็อพเพอร์ตี้ CSS
- ปัญหา HTML WHATWG GitHub สำหรับเมตาแท็ก
ลิงก์ทั่วไปในโหมดมืด:
- ดีไซน์ Material - ธีมมืด
- โหมดมืดในเครื่องมือตรวจสอบเว็บ
- การรองรับโหมดมืดใน WebKit
- หลักเกณฑ์เกี่ยวกับอินเทอร์เฟซมนุษย์ของ Apple - โหมดมืด
บทความวิจัยความเป็นมาสำหรับโพสต์นี้
- "รูปแบบสีที่รองรับ" ของโหมดมืดมีอะไรบ้าง จริงๆ แล้วควรทำหรือไม่ 🤔
- ขอให้มีแต่ความมืด! 🌚 อาจจะ...
- การเปลี่ยนสีใหม่สำหรับโหมดมืด
กิตติกรรมประกาศ
ฟีเจอร์สื่อ prefers-color-scheme, พร็อพเพอร์ตี้ CSS color-scheme,
และเมตาแท็กที่เกี่ยวข้องคืองานติดตั้งใช้งานของ 👏 Rune Lillesveen
Rune ยังเป็นตัวแก้ไขร่วมของข้อกำหนดโมดูลการปรับสี CSS ระดับ 1 อีกด้วย
เราขอขอบคุณ Lukasz Zbylut
Rowan Merewood
Chirag Desai
และ Rob Dodson
ในการทบทวนบทความนี้อย่างละเอียด
กลยุทธ์การโหลดเป็นองค์ประกอบย่อยของ Jake Archibald
Emilio Cobos Álvarez แนะนำให้ฉันไปที่วิธีตรวจจับ prefers-color-scheme ที่ถูกต้อง
เคล็ดลับที่มี SVG อ้างอิงและ currentColor มาจาก
Timothy Hatcher
สุดท้ายนี้ ฉันขอขอบคุณผู้เข้าร่วมที่ไม่ระบุชื่อจำนวนมากจากการศึกษาผู้ใช้ต่างๆ
ซึ่งช่วยกำหนดทิศทางคำแนะนำในบทความนี้
รูปภาพหลักโดย Nathan Anderson