Frontend Academy · บทเรียน

ตัวแปร CSS สำหรับการกำหนดธีม

ประกาศคุณสมบัติกำหนดเองด้วย -- ใช้ var() อ้างอิงค่า แทนที่ค่าในขอบเขตที่ซ้อนกัน และสร้างปุ่มสลับธีมสว่าง/มืด

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

พร็อพเพอร์ตีแบบกำหนดเองของ CSS คืออะไร

พร็อพเพอร์ตีแบบกำหนดเองของ CSS (ตัวแปร CSS) ใช้เก็บค่าที่นำกลับมาใช้ซ้ำได้ตลอดทั้งสไตล์ชีต ประกาศด้วย --name: value และเรียกใช้ด้วย var(--name) ต่างจากตัวแปรของตัวประมวลผลล่วงหน้าอย่าง Sass เพราะพร็อพเพอร์ตีเหล่านี้เป็นแบบไดนามิก คุณจึงอัปเดตด้วย JavaScript ได้

การประกาศพร็อพเพอร์ตีแบบกำหนดเอง

ประกาศพร็อพเพอร์ตีบน :root เพื่อให้เรียกใช้ได้ทั่วทั้งเอกสาร คุณยังประกาศพร็อพเพอร์ตีบนองค์ประกอบใดก็ได้ เพื่อจำกัดขอบเขตให้ใช้กับทรีย่อยขององค์ประกอบนั้น

:root {
  --color-primary: #3182ce;
  --color-bg: #f7fafc;
  --color-text: #1a202c;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

การใช้พร็อพเพอร์ตีแบบกำหนดเอง

อ้างอิงตัวแปรด้วย var(--name) และใส่ค่าทางเลือกเป็นอาร์กิวเมนต์ที่สอง: var(--color-primary, #3182ce) ระบบจะใช้ค่าทางเลือกหากยังไม่ได้กำหนดตัวแปร

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.btn {
  background: var(--color-primary, blue); /* fallback */
}

แคสเคด: ตัวแปรที่จำกัดขอบเขต

พร็อพเพอร์ตีแบบกำหนดเองจะสืบทอดและทำงานตามลำดับแคสเคด หากคุณกำหนดตัวแปรใหม่บนองค์ประกอบลูก ตัวแปรนั้นจะแทนที่ค่าขององค์ประกอบแม่สำหรับองค์ประกอบลูกและองค์ประกอบสืบทอดทั้งหมด

:root { --accent: blue; }

.card { color: var(--accent); } /* blue */

.special-section {
  --accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */

โหมดมืดด้วยตัวแปร CSS

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

:root {
  --bg: #ffffff;
  --text: #1a202c;
  --card-bg: #f7fafc;
}

[data-theme='dark'], @media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a202c;
    --text: #f7fafc;
    --card-bg: #2d3748;
  }
}

body { background: var(--bg); color: var(--text); }

สลับโหมดมืดด้วย JavaScript

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

const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
});

อัปเดตตัวแปรด้วย JavaScript

element.style.setProperty('--name', value) จะอัปเดตพร็อพเพอร์ตีแบบกำหนดเองแบบอินไลน์ การลบพร็อพเพอร์ตีด้วย removeProperty จะคืนค่าที่สืบทอดตามลำดับแคสเคด วิธีนี้ช่วยให้สร้างชุดรูปแบบแบบไดนามิกและค่าแบบเคลื่อนไหวได้

// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');

// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
  document.documentElement.style.setProperty('--primary-hue', hue.value);
});

โทเค็นการออกแบบเป็นตัวแปร CSS

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

:root {
  /* Colour scale */
  --blue-50: #ebf8ff;
  --blue-100: #bee3f8;
  --blue-500: #3182ce;
  --blue-900: #1a365d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}

การใช้ตัวแปรใน calc()

ตัวแปร CSS ทำงานภายใน calc() ได้ ทำให้สามารถคำนวณแบบปรับตามขนาดหน้าจอโดยอิงจากค่าของโทเค็น

:root { --header-height: 64px; }

.content {
  /* Leave room for fixed header */
  padding-top: calc(var(--header-height) + 24px);
  min-height: calc(100vh - var(--header-height));
}

การรองรับของเบราว์เซอร์

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

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

พร็อพเพอร์ตีแบบกำหนดเองเทียบกับตัวแปรซาสส์

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

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

คุณจะอ่านและอัปเดตพร็อพเพอร์ตีแบบกำหนดเองของ CSS จาก JavaScript ได้อย่างไร

ทบทวน: พร็อพเพอร์ตีแบบกำหนดเองของ CSS

ประกาศด้วย -- บน :root เพื่อให้มีขอบเขตทั่วทั้งโปรเจกต์ ใช้ร่วมกับ var() ตัวแปรที่กำหนดขอบเขตจะไหลสืบทอดไปยังองค์ประกอบลูก โหมดมืด: กำหนดโทเค็นสีใหม่ในมีเดียคิวรีหรือแอตทริบิวต์ข้อมูล อัปเดตจาก JavaScript ด้วย style.setProperty() โทเค็นการออกแบบที่เป็นตัวแปร = แหล่งข้อมูลจริงเพียงหนึ่งเดียว

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

บทเรียน “ตัวแปร CSS สำหรับการกำหนดธีม” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ
CSS Grid: template-areas, auto-fit และ minmax
การใช้ Flexbox และ Grid ร่วมกัน
ตัวแปร CSS สำหรับการกำหนดธีม

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