ตัวแปร CSS สำหรับธีม
สร้างระบบธีมที่ใช้โทเค็น โดยใช้คุณสมบัติกำหนดเองของ CSS ซึ่งสลับค่าระหว่างโหมดสว่างและโหมดมืด
ตัวแปร CSS สำหรับธีม เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพรวมสถาปัตยกรรมธีม
คุณสมบัติกำหนดเองของ CSS เป็นรากฐานของการสร้างธีมด้วย CSS สมัยใหม่ คุณสมบัติเหล่านี้ทำหน้าที่เป็นชั้นโทเค็นแบบสดที่สามารถสลับได้ขณะโปรแกรมทำงาน ทำให้รองรับโหมดมืด การใช้แบรนด์ของลูกค้า และการปรับเฉพาะบุคคลที่ผู้ใช้ควบคุมได้
ชั้นโทเค็นการออกแบบ
ระบบธีมที่มีโครงสร้างดีประกอบด้วยสามชั้น:
- โทเค็นพื้นฐาน: ค่าดิบ (
--blue-500: #3b82f6) - โทเค็นเชิงความหมาย: อิงตามความหมาย (
--color-primary: var(--blue-500)) - โทเค็นของคอมโพเนนต์: เฉพาะคอมโพเนนต์ (
--button-bg: var(--color-primary))
การกำหนดธีมสว่าง
กำหนดธีมสว่างให้ครบถ้วนบน :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
การแทนที่ธีมมืด
แทนที่โทเค็นภายในขอบเขตมืด (มีเดียคิวรีหรือคลาส):
<div class="demo">Adapts to dark mode automatically</div>
การใช้โทเค็นในคอมโพเนนต์
คอมโพเนนต์ใช้โทเค็นเชิงความหมาย ไม่ใช้ค่าที่เขียนตายตัว:
<div class="card">Card using theme tokens</div>
การแทนที่ด้วยคลาส
อนุญาตให้แทนที่ด้วยตนเองโดยใช้คลาสบน <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
การสร้างธีมระดับคอมโพเนนต์
คอมโพเนนต์สามารถกำหนดชั้นโทเค็นของตนเองเพื่อปรับแต่งได้ลึกยิ่งขึ้น:
<div class="card">Component-level theming</div>
ธีมแบบไวท์เลเบล
ตัวแปร CSS ช่วยให้สร้างผลิตภัณฑ์แบบไวท์เลเบลได้ โดยลูกค้าแต่ละรายจะได้ธีมที่แตกต่างกันจากการแทนที่โทเค็นแบรนด์เพียงไม่กี่รายการ:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
การเปลี่ยนธีมแบบเคลื่อนไหว
สร้างการเปลี่ยนธีมที่ราบรื่นได้ด้วยการใช้การเปลี่ยนผ่านของ CSS กับคุณสมบัติที่เกี่ยวข้องกับสี:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
เอกสารโทเค็น
จัดทำเอกสารโทเค็นการออกแบบ เพื่อให้นักพัฒนาทุกคนทราบว่าควรใช้ตัวแปรใด คอมโพเนนต์คู่มือสไตล์ (เช่น Storybook) ที่แสดงโทเค็นทั้งหมดพร้อมค่าของธีมสว่างและมืดมีประโยชน์อย่างยิ่งสำหรับทีมขนาดใหญ่
เครื่องมือโทเค็น: พจนานุกรมสไตล์
พจนานุกรมสไตล์ (โดยแอมะซอน) แปลงโทเค็นการออกแบบที่กำหนดใน JSON เป็นคุณสมบัติกำหนดเองของ CSS ค่าคงที่ของ JavaScript และรูปแบบสำหรับแพลตฟอร์มอื่น ๆ โดยอัตโนมัติ ทำให้โทเค็นในงานออกแบบและโค้ดสอดคล้องกัน
ตรวจสอบความเข้าใจ
ในสถาปัตยกรรมโทเค็นสองระดับ คอมโพเนนต์ .button ควรอ้างอิงโทเค็นประเภทใดสำหรับสีพื้นหลัง
สรุป
ตัวแปร CSS ช่วยขับเคลื่อนระบบธีมที่แข็งแกร่ง สร้างสามชั้น ได้แก่ โทเค็นพื้นฐาน โทเค็นเชิงความหมาย และโทเค็นของคอมโพเนนต์ กำหนดธีมด้วยการแทนที่โทเค็นบน :root ผ่านมีเดียคิวรีหรือตัวเลือกแอตทริบิวต์ ใช้โทเค็นเชิงความหมายในคอมโพเนนต์เพื่อสืบทอดธีมโดยอัตโนมัติ เครื่องมืออย่างพจนานุกรมสไตล์ช่วยทำให้การกระจายโทเค็นไปยังแพลตฟอร์มต่าง ๆ เป็นแบบอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “ตัวแปร CSS สำหรับธีม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวแปร CSS สำหรับธีม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวแปร CSS สำหรับธีม”
สร้างระบบธีมที่ใช้โทเค็น โดยใช้คุณสมบัติกำหนดเองของ CSS ซึ่งสลับค่าระหว่างโหมดสว่างและโหมดมืด คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวแปร CSS สำหรับธีม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- มีเดียคิวรี prefers-color-scheme
- ตัวแปร CSS สำหรับธีม
- คุณสมบัติ color-scheme
- การสลับโหมดมืดอัตโนมัติและด้วยตนเอง