ตัวสร้าง CSS light-dark()
สร้างคู่สี CSS light-dark() สำหรับสลับธีมสว่างและมืดอัตโนมัติ พร้อมพรีวิวสด, การตั้งค่า color-scheme และ CSS ที่คัดลอกได้ทันที ประมวลผล 100% ฝั่งไคลเอนต์
Loading tool...
ตัวสร้าง CSS light-dark() คืออะไร?
ตัวสร้าง CSS light-dark() สร้างคู่สีที่ปรับได้โดยใช้ฟังก์ชัน CSS light-dark() ซึ่งคืนสีที่ต่างกันในโหมดสว่างและมืดโดยอัตโนมัติ เมื่อคุณประกาศ color-scheme: light dark เบราว์เซอร์จะแก้ light-dark(lightColor, darkColor) เป็นค่าแรกในโหมดสว่างและค่าที่สองในโหมดมืด โดยไม่ต้องใช้ media query, JavaScript หรือ rule ที่ซ้ำกัน เครื่องมือนี้ให้ตัวเลือกสีคู่, พรีวิวเคียงข้างแบบสด และผลลัพธ์ที่คัดลอกได้สามแบบ: ค่าดิบ, CSS rule เดียว และ snippet ทั้งหมดพร้อม declaration color-scheme
ประโยชน์หลัก
- สลับสว่าง/มืดอัตโนมัติด้วยฟังก์ชัน CSS เดียว ไม่ต้องใช้ media query
- พรีวิวเคียงข้างแบบสดของทั้งสองธีม เรนเดอร์ด้วยค่าจริง
- ตัวเลือก CSS property ในตัวพร้อมรองรับ custom property
- สร้าง declaration color-scheme: light dark ที่จำเป็นให้คุณ
- ทำงาน 100% ฝั่งไคลเอนต์ ใช้งานออฟไลน์ได้และรักษาความเป็นส่วนตัวของสี
กรณีการใช้งาน
- •กำหนดสีแบรนด์ที่ปรับตามธีมผู้ใช้โดยไม่ต้องใช้ rule prefers-color-scheme
- •ตั้งสีข้อความ, พื้นหลัง และขอบที่ทำงานได้ทั้งโหมดสว่างและมืด
- •ย้ายธีมมืดที่ใช้ media query ไปสู่วิธี light-dark() ที่ง่ายกว่า
- •ต้นแบบ color palette ที่ปรับได้สำหรับ design system
วิธีสร้าง CSS light-dark()
- เลือกสีโหมดสว่าง: ใช้ตัวเลือกสีแบบ native หรือพิมพ์ค่า hex (#ffffff) สำหรับสีที่แสดงในโหมดสว่าง หาก hex ไม่ถูกต้องจะใช้สีขาว
- เลือกสีโหมดมืด: เลือกสีที่แสดงในโหมดมืดด้วยวิธีเดียวกัน (เช่น #1a1a1a) ค่าทั้งสองจะกลายเป็น argument ของ light-dark()
- เลือก CSS property: เลือก property ที่ค่าจะนำไปใช้ — color, background-color, border-color หรือ custom property — จาก dropdown
- คัดลอก CSS: คลิก คัดลอก ที่ค่า, rule หรือ snippet ทั้งหมด (ซึ่งรวม declaration color-scheme: light dark ที่จำเป็น) แล้ววางลงใน stylesheet ของคุณ
คุณสมบัติหลัก
- ตัวเลือกสีคู่พร้อมช่องกรอก hex สำหรับสีโหมดสว่างและโหมดมืด
- พรีวิวเคียงข้างแบบสดของทั้งสองธีม เรนเดอร์ด้วยค่า light-dark() จริง
- ตัวเลือก CSS property ในตัว (color, background-color, border-color และอื่น ๆ)
- สร้าง declaration color-scheme: light dark ที่จำเป็นโดยอัตโนมัติ
- คัดลอกค่า light-dark(), CSS rule และ snippet ทั้งหมดได้ในคลิกเดียว