CSS Academy · บทเรียน

การใช้ธีมหลายแบรนด์ด้วยตัวแปร CSS

สลับระหว่างธีมของหลายแบรนด์ขณะทำงาน โดยสลับค่าคุณสมบัติที่กำหนดเองของ CSS

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

ภาพรวมสถาปัตยกรรมธีม

การใช้ธีมหลายแบรนด์จะจับคู่โทเคนนามแฝงของคอมโพเนนต์ชุดเดียวกับค่าโทเคนส่วนกลางที่แตกต่างกันในแต่ละแบรนด์ คอมโพเนนต์จะอ้างอิงโทเคนนามแฝง ส่วนไฟล์ธีมของแบรนด์จะกำหนดนามแฝงให้ชี้ไปยังโทเคนส่วนกลางเฉพาะของแบรนด์นั้นใหม่

ชั้นโทเคนพื้นฐาน

กำหนดโทเคนส่วนกลางใน :root ซึ่งประกอบด้วยค่าสีดิบทั้งหมด ค่าระยะห่าง และค่ารูปแบบตัวอักษร นี่คือแบรนด์เริ่มต้น คอมโพเนนต์จะไม่อ้างอิงโทเคนส่วนกลางโดยตรง แต่ต้องอ้างอิงผ่านนามแฝงเสมอ

  <span class="swatch swatch-primary"></span>
  <span class="swatch swatch-secondary"></span>

ชั้นโทเคนนามแฝง

โทเคนนามแฝงจะอ้างอิงโทเคนส่วนกลางโดยใช้ var(): --color-action: var(--color-brand-primary) คอมโพเนนต์จะใช้ --color-action การเปลี่ยนความหมายของ --color-brand-primary จะเปลี่ยนทั้งระบบ

คลาสธีมของแบรนด์

ใช้ธีมของแบรนด์ด้วยคลาสบน html หรือองค์ประกอบคอนเทนเนอร์ แต่ละคลาสธีมจะแทนที่โทเคนส่วนกลางสำหรับขอบเขตของแบรนด์นั้น คอมโพเนนต์ภายในคอนเทนเนอร์จะรับค่าของแบรนด์โดยอัตโนมัติ

  <span class="swatch"></span>
  <span class="theme-brand-a swatch"></span>
  <span class="theme-brand-b swatch"></span>

โหมดมืดในฐานะธีม

โหมดมืดคือรูปแบบหนึ่งของธีม ซึ่งเป็นคลาสหรือคิวรีสื่อที่แทนที่โทเคนสี ใช้ prefers-color-scheme สำหรับค่าเริ่มต้นจากระบบปฏิบัติการ และใช้คลาส .dark สำหรับการตั้งค่าทับโดยผู้ใช้ ทั้งสองวิธีจะเปลี่ยนโทเคนนามแฝงชุดเดียวกัน

  <div class="surface">Themed surface</div>

การสืบทอดโทเคน

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

การป้องกันโทเคนรั่วไหล

ตรวจสอบให้แน่ใจว่าโทเคนนามแฝงถูกกำหนดค่าไว้เสมอ หากไม่มีคลาสธีม นามแฝงควรเปลี่ยนไปใช้ค่าเริ่มต้นได้อย่างเหมาะสม ใช้รูปแบบค่าทดแทนของ CSS var(): var(--color-action, #3b82f6) เพื่อป้องกันข้อความที่มองไม่เห็นหรือพื้นหลังที่หายไป

การสร้างไฟล์ธีม

สไตล์ดิกชันนารีสามารถส่งออกไฟล์ CSS ของธีมแยกกันจากแหล่งข้อมูลโทเคนในรูปแบบเจสัน ขั้นตอนการสร้างจะสร้าง theme-brand-a.css และ theme-brand-b.css โหลดไฟล์ที่เหมาะสมขณะทำงาน หรือคอมไพล์เป็นชุดไฟล์แยกกันสำหรับแต่ละแบรนด์

การทดสอบธีม

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

การสลับธีมขณะทำงาน

สลับคลาสธีมด้วย JavaScript: document.documentElement.classList.replace("theme-a", "theme-b") ตัวแปร CSS จะอัปเดตทันทีโดยไม่ต้องแสดงผลคอมโพเนนต์ใหม่ ไม่จำเป็นต้องแสดงผล React ใหม่หรือคำนวณรูปแบบของค่าคงที่ซ้ำ

ข้อควรพิจารณาด้านประสิทธิภาพ

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

ตรวจสอบความรู้

ธีมคุณสมบัติที่กำหนดเองของ CSS ช่วยให้สลับแบรนด์ได้อย่างไรโดยไม่ต้องเปลี่ยน CSS ของคอมโพเนนต์

สรุป

การใช้ธีมหลายแบรนด์จะแยกค่าดิบของโทเคนส่วนกลางออกจากโทเคนนามแฝงเชิงความหมาย คลาสธีมจะแทนที่โทเคนส่วนกลางในขอบเขตของคอนเทนเนอร์ คอมโพเนนต์ที่อ้างอิงนามแฝงจะแสดงผลตามธีมของแบรนด์ที่กำลังใช้งานโดยอัตโนมัติ ทำให้สลับธีมขณะทำงานได้โดยไม่ต้องเปลี่ยนโค้ดคอมโพเนนต์

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

บทเรียน “การใช้ธีมหลายแบรนด์ด้วยตัวแปร CSS” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การใช้ธีมหลายแบรนด์ด้วยตัวแปร CSS”

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

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

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

บทเรียน “การใช้ธีมหลายแบรนด์ด้วยตัวแปร CSS” ใช้เวลานานแค่ไหน

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

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

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

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

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