CSS Academy · บทเรียน

คุณสมบัติ color-scheme

ใช้คุณสมบัติ color-scheme เพื่อแจ้งเบราว์เซอร์ว่าองค์ประกอบรองรับธีมใดบ้าง

บทเรียน 3 จาก 412 ขั้นตอน

คุณสมบัติ color-scheme เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

color-scheme คืออะไร

คุณสมบัติ color-scheme บอกเบราว์เซอร์ว่าองค์ประกอบ (หรือหน้าเว็บ) รองรับชุดสีใดบ้าง จากนั้นเบราว์เซอร์จะใช้ข้อมูลนี้จัดรูปแบบองค์ประกอบส่วนติดต่อของตนเอง เช่น แถบเลื่อน ตัวควบคุมแบบฟอร์ม ช่องทำเครื่องหมาย เส้นขอบช่องป้อนข้อมูล ให้ตรงกับชุดสีที่ร้องขอ

ค่าของ color-scheme

ค่าที่ยอมรับ:

normal: องค์ประกอบใช้ค่าเริ่มต้นของเอกสาร
light: องค์ประกอบรองรับเฉพาะชุดสีสว่าง
dark: องค์ประกอบรองรับเฉพาะชุดสีมืด
light dark: รองรับทั้งสองชุดสี โดยเบราว์เซอร์เลือกตามการตั้งค่า
dark light: ต้องการชุดสีมืดก่อน และใช้ชุดสีสว่างเป็นทางเลือกสำรอง

องค์ประกอบส่วนติดต่อของเบราว์เซอร์

เบราว์เซอร์จะจัดรูปแบบองค์ประกอบเหล่านี้โดยอัตโนมัติตาม color-scheme:

แถบเลื่อน
ช่องป้อนข้อมูล พื้นที่ข้อความ และรายการแบบเลื่อนลงสำหรับเลือกค่า
ช่องทำเครื่องหมายและปุ่มตัวเลือก
แถบเลื่อนปรับช่วงค่า
ตัวเลือกวันที่และเวลา

การตั้งค่าบนองค์ประกอบ html

การตั้งค่า color-scheme บนองค์ประกอบรากจะเปลี่ยนการแสดงผลส่วนติดต่อผู้ใช้ของระบบสำหรับทั้งหน้า:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

สิ่งเทียบเท่าเมตาแท็ก

คุณยังสามารถประกาศ color-scheme ใน HTML เป็นเมตาแท็ก เพื่อให้เริ่มใช้งานได้เร็วขึ้น (ก่อนที่ CSS จะโหลด):

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

โหมดมืดโดยไม่กำหนดสีเอง

โหมดมืดแบบพื้นฐาน: ตั้งค่า color-scheme: dark แล้วให้เบราว์เซอร์จัดการองค์ประกอบของแบบฟอร์มและแถบเลื่อนโดยอัตโนมัติ:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

การใช้ร่วมกับ prefers-color-scheme

ใช้ prefers-color-scheme เพื่อตรวจจับการตั้งค่า แล้วกำหนดทั้งโทเค็นที่กำหนดเอง AND คุณสมบัติ color-scheme พร้อมกัน:

<div class="demo">Themed via variables + color-scheme</div>

ขอบเขตของ color-scheme

ใช้ color-scheme กับองค์ประกอบเฉพาะเพื่อสร้างพื้นที่สว่างแบบแยกส่วนบนหน้ามืด:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

สีที่บังคับใช้ / คอนทราสต์สูงของ Windows

มีเดียคิวรี forced-colors ตรวจจับโหมดคอนทราสต์สูงของ Windows ใช้ color-scheme และ forced-colors ร่วมกันเพื่อรองรับการเข้าถึงอย่างครอบคลุม

<div class="card">Card respects forced-colors mode</div>

คำสำคัญสีของระบบ

เมื่อ forced-colors ทำงานอยู่ ให้ใช้คำสำคัญสีของระบบ CSS ซึ่งจับคู่กับชุดสีเพื่อการเข้าถึงของผู้ใช้:

<button>System-styled button</button>

ตรวจสอบความเข้าใจ

การตั้งค่า color-scheme: dark บนองค์ประกอบ html เปิดใช้พฤติกรรมใดของ CSS

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

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

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติ color-scheme” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คุณสมบัติ color-scheme” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติ color-scheme”

ใช้คุณสมบัติ color-scheme เพื่อแจ้งเบราว์เซอร์ว่าองค์ประกอบรองรับธีมใดบ้าง คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “คุณสมบัติ color-scheme” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy