บังคับโหมดมืดบนเว็บไซต์ใดๆ ด้วย Rendering Tool ของ Edge – ไม่ต้องใช้ส่วนขยาย

Windows 11 มีตัวเลือกในการใช้โหมดมืดหรือสว่างบนแอปพลิเคชันใดๆ Microsoft มีเครื่องมือที่คล้ายกันสำหรับ Edge เรียกว่า Rendering tool Rendering tool สามารถ "emulate dark or light schemes in the rendered page" (เลียนแบบโครงร่างสีมืดหรือสว่างในหน้าที่เรนเดอร์) ช่วยให้คุณเห็นว่าเว็บไซต์จะดูอย่างไร

ดังนั้น หากคุณต้องการตัวเลือกในการเปิดใช้งานโหมดมืดหรือสว่างโดยไม่ใช้ส่วนขยาย Edge เช่น Dark Reader คุณสามารถใช้ Rendering tool บน Edge แทนได้

สำคัญที่ต้องทราบว่า Rendering tool บน Edge เป็นเครื่องมือพัฒนาเว็บที่มีไว้สำหรับนักพัฒนาเว็บ เพื่อดูว่าเว็บเพจดูอย่างไรในตัวเลือกการแสดงผลที่แตกต่างกัน หรือสำหรับคนที่มีปัญหาด้านการมองเห็น เช่น ความบอดสี

เครื่องมือนักพัฒนาในเบราว์เซอร์ใดๆ เป็นสำหรับการทดสอบเท่านั้น จึงไม่สามารถบันทึกการเปลี่ยนแปลงที่คุณทำในเครื่องมือนี้ได้ คุณสามารถทำการเปลี่ยนแปลงและบันทึกได้เฉพาะในโค้ดของคุณเท่านั้น

เปิดใช้งานเครื่องมือนักพัฒนา

คล้ายกับแท็บ Rendering บน Chrome คุณสามารถใช้ Rendering tool บน Edge เพื่อดูว่าเว็บไซต์ดูอย่างไรเมื่อแสดงในตัวเลือกสีที่แตกต่างกัน

Chris Heilmann ผู้จัดการโปรแกรมหลักสำหรับ Browser Tools ที่ Microsoft เสนอคำแนะนำที่มีประโยชน์เกี่ยวกับวิธีบังคับโหมดมืดสำหรับเว็บไซต์ที่ไม่มีตัวเลือกโหมดมืด

เพื่อเปิดใช้งานและใช้ฟีเจอร์นี้ คุณต้องเปิด Edge DevTools คุณมี 4 วิธีในการเปิด DevTools:

1. คลิกขวาที่เว็บไซต์ใดๆ โดยใช้เมาส์ และคลิกซ้าย Inspect (ตรวจสอบ) ตัวเลือกนี้จะนำคุณไปที่แท็บ "Elements" ภายใต้เครื่องมือนักพัฒนา (DevTools) แต่คุณสามารถคลิกแท็บ "Rendering" จากที่นี่ได้เสมอ



2. ไปที่เมนูสามจุด Edge Settings ที่มุมขวาบนของหน้าต่าง Edge ที่เปิดอยู่ คลิก More tools > Developer tools



3. ใช้ลัด Ctrl + Shift + I บนคีย์บอร์ด
   4. กด F12 บนคีย์บอร์ด คุณสามารถปิดลัดคีย์บอร์ดนี้ได้ภายหลังในการตั้งค่า Edge

เข้าถึง Rendering tool บน Edge

ตอนนี้ DevTools เปิดอยู่ใน Edge แล้ว คุณควรจะได้รับการต้อนรับด้วยแท็บ "Welcome"

ขั้นตอนต่อไปคือการเปิดแท็บ Rendering นี่คือสิ่งที่คุณต้องทำ:

1. คลิกเมนูสามจุด DevTools ที่มุมขวาบน
   2. คลิก More tools > Rendering

3. เลื่อนลงจนกว่าจะพบ Enable automatic dark mode. คลิกช่องเพื่อเปิดใช้งานโหมดมืดอัตโนมัติ ซึ่งตั้งค่า prefers-color-scheme เป็น dark

การเปลี่ยนแปลงเป็นโหมดมืดอัตโนมัติเป็นแบบतात्कาล ดังนั้นไม่จำเป็นต้องรีเฟรชหน้าเว็บเพื่อให้การเปลี่ยนแปลงมีผล