ตัวแปร CSS สำหรับสลับธีม

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

เมื่อกำหนดแอตทริบิวต์ data-theme="dark" บน document.documentElement ตัวเลือก CSS อย่าง [data-theme='dark'] จะแทนที่ตัวแปรระดับรากด้วยค่าสำหรับธีมมืด คอมโพเนนต์จะอ้างอิง var(--color-bg) และรับค่าใหม่โดยอัตโนมัติโดยไม่ต้องเปลี่ยนโค้ด

อย่างน้อยที่สุด ให้กำหนด --color-bg (พื้นหลังหน้า), --color-text (ข้อความหลัก), --color-primary (สีแบรนด์), --color-surface (พื้นหลังการ์ดหรือแผง) และ --color-border (เส้นแบ่ง) ชุดโทเค็นที่สอดคล้องกันช่วยป้องกันไม่ให้ค่าสีที่กำหนดเฉพาะจุดปรากฏในคอมโพเนนต์

ใน CSS ของคอมโพเนนต์ ให้อ้างอิงตัวแปรเช่น background: var(--color-bg) และ color: var(--color-text) คุณยังสามารถระบุค่าทดแทนได้ด้วย var(--color-bg, #ffffff) เบราว์เซอร์จะประมวลผลตัวแปรในขณะแสดงผล ดังนั้นคลาสเดียวจึงใช้ได้กับทั้งธีมสว่างและธีมมืด

เพิ่ม transition: background-color 200ms, color 200ms ให้กับตัวเลือก :root เมื่อแอตทริบิวต์ data-theme เปลี่ยนแปลง องค์ประกอบทั้งหมดที่ใช้ตัวแปร CSS จะเปลี่ยนผ่านไปยังค่าใหม่พร้อมกัน ทำให้ได้ประสบการณ์ที่ดูประณีตโดยไม่ต้องเขียนโค้ดแอนิเมชันด้วย JS

การจัดการธีมด้วยตัวแปร CSS เหนือกว่าการกำหนดสไตล์อินไลน์จาก JavaScript เบราว์เซอร์จะจัดการคำนวณสไตล์ใหม่โดยตรง ไม่มีการเรนเดอร์ React ใหม่เพิ่มเติมสำหรับคอมโพเนนต์ลูกแต่ละตัวที่ใช้ธีม และลำดับการใช้กฎ CSS จะจัดการการสืบทอดโดยอัตโนมัติ JS เพียงต้องสลับแอตทริบิวต์เดียวบนองค์ประกอบราก

คุณสามารถใช้ตัวแปร CSS ร่วมกับคิวรี @media (prefers-color-scheme: dark) เป็นค่าทดแทนที่ใช้ CSS เพียงอย่างเดียวได้ กำหนดค่าทดแทนสำหรับธีมมืดไว้ภายในมีเดียคิวรี นอกเหนือจากหรือแทนที่ตัวเลือก data-theme วิธีนี้ทำให้โหมดมืดทำงานได้แม้ JavaScript ยังไม่ได้ทำงาน

แนวทางที่ทนทานที่สุดคือใช้ทั้งสองกลไกร่วมกัน คิวรี @media จะให้ค่าเริ่มต้นตาม OS ส่วนแอตทริบิวต์ data-theme อนุญาตให้ผู้ใช้แทนที่ค่าผ่าน JavaScript เมื่อมีแอตทริบิวต์นี้อยู่ ค่าดังกล่าวจะมีผลเหนือกว่าเนื่องจากมีความจำเพาะเจาะจงสูงกว่า หากไม่มีแอตทริบิวต์ มีเดียคิวรีจะมีผล

สำหรับรูปภาพที่ดูไม่ดีบนพื้นหลังสีเข้ม ให้ใช้องค์ประกอบ picture ของ HTML พร้อมองค์ประกอบลูก source media="(prefers-color-scheme: dark)" เบราว์เซอร์จะเลือกภาพเวอร์ชันมืดโดยอัตโนมัติ สำหรับไอคอน SVG ใน CSS คุณสามารถใช้ filter: invert(1) เป็นการประมาณค่าอย่างรวดเร็วได้

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

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

พร็อพเพอร์ตีแบบกำหนดเองของ CSS บน :root จัดเตรียมระบบโทเค็นส่วนกลางสำหรับธีม สลับแอตทริบิวต์ data-theme บนองค์ประกอบ HTML เพื่อเปลี่ยนธีมได้ทันที เพิ่มการเปลี่ยนผ่าน CSS เพื่อให้แอนิเมชันราบรื่น ใช้มีเดียคิวรี prefers-color-scheme เป็นค่าทดแทนที่ใช้ CSS เพียงอย่างเดียว และหลีกเลี่ยงการแทนที่สไตล์ด้วย JS ในแต่ละคอมโพเนนต์