การตรวจจับชุดสีของระบบ
อ่านค่ากำหนดโหมดมืดของ OS ของผู้ใช้ด้วย prefers-color-scheme และอัปเดตสถานะ React เมื่อค่าดังกล่าวเปลี่ยนแปลง
การตรวจจับชุดสีของระบบ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
มีเดียคิวรี prefers-color-scheme
มีเดียคิวรี CSS prefers-color-scheme ตรวจสอบว่าผู้ใช้กำหนดให้ระบบปฏิบัติการใช้ธีมสีเข้มหรือสีอ่อน มีค่าที่รองรับสองค่า ได้แก่ dark และ light การตั้งค่านี้กำหนดไว้ในระดับ OS ผ่านการตั้งค่าระบบ ไม่ใช่ในเบราว์เซอร์
โหมดมืดของ CSS ผ่านมีเดียคิวรี
คุณสามารถใช้สไตล์โหมดมืดด้วย CSS เพียงอย่างเดียวผ่าน @media (prefers-color-scheme: dark) { ... } ภายในบล็อกนี้ ให้แทนที่สี พื้นหลัง และเส้นขอบให้เหมาะกับชุดสีเข้ม วิธีนี้ไม่ต้องใช้ JavaScript และทำงานได้แม้ก่อนที่ React จะเมานต์
window.matchMedia ใน JavaScript
ใน JavaScript window.matchMedia('(prefers-color-scheme: dark)') จะส่งคืนออบเจ็กต์ MediaQueryList คุณสามารถใช้เพื่ออ่านการตั้งค่าปัจจุบันของระบบผ่านโปรแกรมภายในฮุกของ React หรือตัวจัดการเหตุการณ์ นี่คือสะพานเชื่อมระหว่างมีเดียคิวรี CSS กับตรรกะ JS ของคุณ
การอ่านค่าเริ่มต้น
ออบเจ็กต์ MediaQueryList มีพร็อพเพอร์ตี matches ที่ส่งคืนค่าบูลีน หาก matches เป็น true แสดงว่าระบบอยู่ในโหมดมืด หากเป็น false แสดงว่าอยู่ในโหมดสว่าง โดยทั่วไปคุณจะอ่านค่านี้ครั้งเดียวตอนเมานต์เพื่อกำหนดค่าเริ่มต้นให้สถานะธีม
การรับฟังการเปลี่ยนแปลงของระบบ
ผู้ใช้สามารถเปลี่ยนชุดสีของ OS ได้ทุกเมื่อ หากต้องการตอบสนองแบบไดนามิก ให้เรียก mediaQuery.addEventListener('change', handler) โดย handler จะได้รับ MediaQueryListEvent ที่อัปเดตแล้ว ออบเจ็กต์เหตุการณ์ยังมีค่าบูลีน matches ที่สะท้อนการตั้งค่าใหม่ด้วย
การสร้างฮุก usePrefersDarkMode
แนวทางที่เป็นระเบียบคือสร้างฮุกแบบกำหนดเองโดยใช้ useSyncExternalStore ฮุกจะสมัครรับการเปลี่ยนแปลงผ่าน mediaQuery.addEventListener และจัดเตรียมฟังก์ชันสแนปชอตที่ส่งคืน mediaQuery.matches วิธีนี้ทำให้ฮุกสอดคล้องกับ API ของเบราว์เซอร์ภายนอกโดยไม่ต้องจัดการสถานะด้วยตนเอง
การยกเลิกการสมัครรับเมื่อทำความสะอาด
เมื่อคอมโพเนนต์ของคุณถูกถอดออก คุณต้องนำตัวรับฟังเหตุการณ์ออกเพื่อป้องกันการรั่วไหลของหน่วยความจำ ในการทำความสะอาดของ useEffect ให้เรียก mediaQuery.removeEventListener('change', handler) เมื่อใช้ useSyncExternalStore ฟังก์ชันสมัครรับต้องส่งคืนฟังก์ชันยกเลิกการสมัครที่ทำสิ่งเดียวกัน
การตั้งค่าของระบบเทียบกับการแทนที่โดยผู้ใช้
การตั้งค่าของระบบคือสิ่งที่ OS รายงาน แต่ผู้ใช้มักต้องการแทนที่ธีมของแอปแยกจากกัน เช่น ต้องการให้แอปใช้โหมดสว่างขณะที่ OS อยู่ในโหมดมืด สถาปัตยกรรมของคุณควรแยกค่าเริ่มต้นของระบบออกจากการแทนที่ที่ผู้ใช้กำหนดไว้อย่างชัดเจนใน localStorage
การจำลองชุดสีใน DevTools
Chrome DevTools ให้คุณจำลองการตั้งค่าชุดสีได้โดยไม่ต้องเปลี่ยนการตั้งค่า OS เปิด DevTools ไปที่แท็บการแสดงผล แล้วค้นหาเมนูแบบเลื่อนลง "จำลองคุณลักษณะมีเดีย CSS prefers-color-scheme" ฟีเจอร์นี้มีประโยชน์อย่างยิ่งสำหรับการทดสอบทั้งสองธีมอย่างรวดเร็วระหว่างการพัฒนา
เคารพการตั้งค่าของผู้ใช้เป็นค่าเริ่มต้น
การใช้งานโหมดมืดที่ดีควรอ่านการตั้งค่าของระบบเป็นจุดเริ่มต้นและนำไปใช้ทันที วิธีนี้แสดงถึงการเคารพการตั้งค่าด้านการเข้าถึงของผู้ใช้ คุณควรจัดเก็บและใช้การแทนที่แบบอื่นก็ต่อเมื่อผู้ใช้สลับธีมอย่างชัดเจนในแอปของคุณแล้ว
ข้อควรพิจารณาเกี่ยวกับ SSR สำหรับการตั้งค่าของระบบ
บนเซิร์ฟเวอร์จะไม่มี window.matchMedia หากคุณเรนเดอร์บนเซิร์ฟเวอร์ ให้ตรวจสอบด้วย typeof window !== 'undefined' ก่อนเรียก matchMedia สำหรับแอป SSR ให้อ่านการตั้งค่าของผู้ใช้จากคุกกี้หรือส่วนหัว HTTP แทน เพื่อหลีกเลี่ยงความไม่ตรงกันระหว่างการไฮเดรต
การตรวจสอบ API ของ matchMedia
พร็อพเพอร์ตีใดของออบเจ็กต์ MediaQueryList ที่บอกว่ามีเดียคิวรีตรงกับเงื่อนไขในขณะนั้นหรือไม่
สรุปบทเรียน: การตรวจจับชุดสีของระบบ
มีเดียคิวรี prefers-color-scheme เปิดเผยการตั้งค่าสีของ OS ทั้งใน CSS และ JavaScript ใช้ window.matchMedia เพื่ออ่านและรับฟังการเปลี่ยนแปลง ทำความสะอาดตัวรับฟังเหตุการณ์เสมอ และแยกค่าเริ่มต้นของระบบออกจากการแทนที่โดยผู้ใช้ การจำลองผ่าน Chrome DevTools ช่วยเร่งการทดสอบทั้งสองธีม
เรียนรู้ React ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 88
- บทเรียน
- 324
คำถามที่พบบ่อย
บทเรียน “การตรวจจับชุดสีของระบบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตรวจจับชุดสีของระบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตรวจจับชุดสีของระบบ”
อ่านค่ากำหนดโหมดมืดของ OS ของผู้ใช้ด้วย prefers-color-scheme และอัปเดตสถานะ React เมื่อค่าดังกล่าวเปลี่ยนแปลง คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตรวจจับชุดสีของระบบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตรวจจับชุดสีของระบบ
- ตัวแปร CSS สำหรับสลับธีม
- React Context สำหรับสถานะธีม
- การคงธีมไว้และป้องกันหน้ากระพริบ