HTML & CSS EP16: CSS Variables และ Design System — สร้างธีมเว็บไซต์ที่ปรับแต่งได้ทั้งระบบ

HTML & CSS

บทเรียน HTML และ CSS ตอนที่ 16 เรียนรู้ CSS Custom Properties หรือ CSS Variables การกำหนดค่าสี ฟอนต์ ระยะห่าง เงา และมุมโค้งไว้เป็นตัวแปรส่วนกลาง การสร้าง Design Tokens การทำ Light/Dark Theme ด้วย JavaScript และ localStorage รวมถึงการสร้างหน้าเว็บไซต์ตัวอย่างที่เปลี่ยนธีมได้จริงและรองรับหน้าจอหลายขนาด

HTML & CSS EP16: CSS Variables และ Design System

1. CSS Variables คืออะไร

:root {
  --color-primary: #2563eb;
  --color-text: #1e293b;
  --color-surface: #ffffff;
  --radius-card: 16px;
}

.button {
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-card);
}

.card {
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

ทำไมจึงนิยมประกาศตัวแปรไว้ใน :root

2. เข้าใจ var() และค่า fallback

.notice {
  color: var(--notice-text, #7c2d12);
  background: var(--notice-background, #ffedd5);
  padding: var(--space-md, 16px);
}

:root {
  --space-md: 1rem;
}

การตั้งชื่อตัวแปรให้อ่านง่าย

3. สร้าง Design Tokens สำหรับเว็บไซต์

:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-surface: #ffffff;
  --color-page: #f1f5f9;
  --color-border: #e2e8f0;

  /* Typography */
  --font-body: system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-body: 1.6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Shape and depth */
  --radius-card: 18px;
  --radius-button: 10px;
  --shadow-card: 0 10px 30px rgb(15 23 42 / 8%);
}

4. สร้าง Light Theme และ Dark Theme ด้วย data-theme

:root {
  color-scheme: light;
  --color-page: #f1f5f9;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-muted: #cbd5e1;
  --color-border: #334155;
}

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

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

เหตุใดจึงใช้ data-theme แทนการเปลี่ยนคลาสทุกกล่อง

5. เชื่อม JavaScript เพื่อสลับธีมและจดจำการตั้งค่า

const root = document.documentElement;
const themeButton = document.querySelector('#theme-toggle');

function applyTheme(theme) {
  root.dataset.theme = theme;
  themeButton.setAttribute(
    'aria-pressed',
    String(theme === 'dark')
  );
  themeButton.textContent = theme === 'dark'
    ? '☀️ เปลี่ยนเป็น Light Mode'
    : '🌙 เปลี่ยนเป็น Dark Mode';
}

const savedTheme = localStorage.getItem('site-theme');
const systemPrefersDark = window.matchMedia(
  '(prefers-color-scheme: dark)'
).matches;

applyTheme(savedTheme || (systemPrefersDark ? 'dark' : 'light'));

themeButton.addEventListener('click', () => {
  const nextTheme = root.dataset.theme === 'dark'
    ? 'light'
    : 'dark';

  applyTheme(nextTheme);
  localStorage.setItem('site-theme', nextTheme);
});

6. สร้างคอมโพเนนต์ที่เปลี่ยนธีมตาม Design Tokens

.card {
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.card__description {
  color: var(--color-muted);
  line-height: var(--line-height-body);
}

.button {
  color: white;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-button);
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
}

.button:hover {
  background: var(--color-primary-hover);
}

7. ทำให้ธีมรองรับการเข้าถึงและผู้ใช้ทุกกลุ่ม

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

8. ตัวอย่างโปรเจกต์: Dashboard ที่สลับ Light/Dark Theme ได้

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <title>Design Tokens Dashboard | EP16</title>
  <style>
    :root {
      color-scheme: light;
      --color-primary: #2563eb;
      --color-primary-hover: #1d4ed8;
      --color-page: #f1f5f9;
      --color-surface: #ffffff;
      --color-text: #1e293b;
      --color-muted: #64748b;
      --color-border: #e2e8f0;
      --color-success: #15803d;
      --color-success-bg: #dcfce7;
      --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --radius-card: 18px;
      --radius-button: 10px;
      --shadow-card: 0 10px 30px rgb(15 23 42 / 7%);
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --color-page: #0f172a;
      --color-surface: #1e293b;
      --color-text: #f1f5f9;
      --color-muted: #cbd5e1;
      --color-border: #334155;
      --color-success: #86efac;
      --color-success-bg: #14532d;
      --shadow-card: 0 10px 30px rgb(0 0 0 / 18%);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--color-page);
      color: var(--color-text);
      font-family: var(--font-body);
      line-height: 1.6;
      transition: background-color 180ms ease, color 180ms ease;
    }

    .container {
      width: min(1100px, calc(100% - 32px));
      margin-inline: auto;
      padding-block: var(--space-xl);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-bottom: var(--space-xl);
    }

    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      color: white;
      background: var(--color-primary);
      font-size: 23px;
      font-weight: 800;
    }
    .brand h1 { margin: 0; font-size: clamp(20px, 4vw, 28px); line-height: 1.2; }
    .brand p { margin: 4px 0 0; color: var(--color-muted); font-size: 13px; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 15px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-button);
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
      font-size: 14px;
      font-weight: 650;
      cursor: pointer;
      transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button:active { transform: translateY(0); }
    .button-primary { background: var(--color-primary); color: #fff; border-color: transparent; }
    .button-primary:hover { background: var(--color-primary-hover); }

    button:focus-visible, a:focus-visible {
      outline: 3px solid var(--color-primary);
      outline-offset: 3px;
    }

    .welcome { margin-bottom: var(--space-lg); }
    .welcome h2 { margin: 0 0 6px; font-size: clamp(22px, 4vw, 30px); }
    .welcome p { margin: 0; color: var(--color-muted); }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }

    .card {
      min-width: 0;
      padding: var(--space-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-surface);
      box-shadow: var(--shadow-card);
      transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
    }
    .card:hover { transform: translateY(-3px); }
    .stat-label { color: var(--color-muted); font-size: 14px; }
    .stat-value { margin: 8px 0 4px; font-size: clamp(25px, 4vw, 34px); font-weight: 800; letter-spacing: -1px; }
    .stat-note { color: var(--color-success); font-size: 13px; font-weight: 650; }

    .content-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
      gap: var(--space-lg);
    }
    .section-title { margin: 0 0 16px; font-size: 18px; }
    .task-list { display: grid; gap: 12px; }
    .task {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--color-border);
      border-radius: 12px;
    }
    .task-icon {
      display: grid;
      place-items: center;
      flex: 0 0 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--color-page);
      font-size: 18px;
    }
    .task h3 { margin: 0; font-size: 15px; }
    .task p { margin: 4px 0 0; color: var(--color-muted); font-size: 13px; }
    .status {
      display: inline-block;
      margin-top: 8px;
      padding: 3px 8px;
      border-radius: 999px;
      color: var(--color-success);
      background: var(--color-success-bg);
      font-size: 11px;
      font-weight: 750;
    }
    .token-list { display: grid; gap: 14px; }
    .token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
    .token-name { color: var(--color-muted); }
    .swatch { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
    .swatch-color { width: 20px; height: 20px; border-radius: 6px; background: var(--color-primary); border: 1px solid var(--color-border); }
    .swatch-surface { background: var(--color-surface); }
    .swatch-border { background: var(--color-border); }
    .divider { height: 1px; background: var(--color-border); margin-block: 16px; }
    .footer { padding-top: var(--space-xl); color: var(--color-muted); text-align: center; font-size: 12px; }

    @media (max-width: 760px) {
      .stats { grid-template-columns: 1fr; }
      .content-grid { grid-template-columns: 1fr; }
      .container { padding-block: 22px; }
      .card { padding: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>
  <main class="container">
    <header class="topbar">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">D</div>
        <div>
          <h1>Design System</h1>
          <p>CSS Variables Dashboard · EP16</p>
        </div>
      </div>
      <button class="button" id="theme-toggle" type="button" aria-pressed="false">
        🌙 เปลี่ยนเป็น Dark Mode
      </button>
    </header>

    <section class="welcome" aria-labelledby="welcome-title">
      <h2 id="welcome-title">ภาพรวมโปรเจกต์</h2>
      <p>ตัวอย่างการใช้ Design Tokens ควบคุมรูปแบบเว็บไซต์จากจุดเดียว</p>
    </section>

    <section class="stats" aria-label="สถิติภาพรวม">
      <article class="card">
        <div class="stat-label">โปรเจกต์ทั้งหมด</div>
        <div class="stat-value">24</div>
        <div class="stat-note">↑ 12% จากเดือนก่อน</div>
      </article>
      <article class="card">
        <div class="stat-label">งานที่เสร็จแล้ว</div>
        <div class="stat-value">18</div>
        <div class="stat-note">75% ของงานทั้งหมด</div>
      </article>
      <article class="card">
        <div class="stat-label">สมาชิกในทีม</div>
        <div class="stat-value">08</div>
        <div class="stat-note">พร้อมทำงานร่วมกัน</div>
      </article>
    </section>

    <section class="content-grid" aria-label="รายละเอียดโปรเจกต์">
      <article class="card">
        <h2 class="section-title">งานล่าสุด</h2>
        <div class="task-list">
          <div class="task">
            <div class="task-icon" aria-hidden="true">🎨</div>
            <div>
              <h3>กำหนด Design Tokens</h3>
              <p>จัดระเบียบสี ฟอนต์ ระยะห่าง และมุมโค้ง</p>
              <span class="status">เสร็จแล้ว</span>
            </div>
          </div>
          <div class="task">
            <div class="task-icon" aria-hidden="true">🧩</div>
            <div>
              <h3>สร้างคอมโพเนนต์การ์ด</h3>
              <p>ใช้ตัวแปรร่วมกันเพื่อให้รูปแบบสม่ำเสมอ</p>
              <span class="status">เสร็จแล้ว</span>
            </div>
          </div>
          <div class="task">
            <div class="task-icon" aria-hidden="true">🌙</div>
            <div>
              <h3>ระบบเปลี่ยนธีม</h3>
              <p>สลับ Light และ Dark พร้อมจดจำการตั้งค่า</p>
              <span class="status">เสร็จแล้ว</span>
            </div>
          </div>
        </div>
      </article>

      <aside class="card" aria-labelledby="tokens-title">
        <h2 class="section-title" id="tokens-title">Design Tokens</h2>
        <div class="token-list">
          <div class="token-row">
            <span class="token-name">Primary Color</span>
            <span class="swatch"><span class="swatch-color" aria-hidden="true"></span>#2563eb</span>
          </div>
          <div class="divider"></div>
          <div class="token-row">
            <span class="token-name">Surface</span>
            <span class="swatch"><span class="swatch-color swatch-surface" aria-hidden="true"></span>Surface</span>
          </div>
          <div class="divider"></div>
          <div class="token-row">
            <span class="token-name">Border</span>
            <span class="swatch"><span class="swatch-color swatch-border" aria-hidden="true"></span>Border</span>
          </div>
          <div class="divider"></div>
          <div class="token-row">
            <span class="token-name">Card Radius</span>
            <strong>18px</strong>
          </div>
          <div class="token-row">
            <span class="token-name">Base Spacing</span>
            <strong>16px</strong>
          </div>
        </div>
        <p style="color: var(--color-muted); font-size: 13px; margin: 20px 0 0;">
          ลองเปลี่ยนธีมเพื่อดูว่าคอมโพเนนต์ทั้งหมดใช้ตัวแปรชุดเดียวกัน
        </p>
      </aside>
    </section>

    <footer class="footer">
      HTML & CSS Learning Series · ตอนที่ 16: CSS Variables และ Design System
    </footer>
  </main>

  <script>
    const root = document.documentElement;
    const themeButton = document.querySelector('#theme-toggle');
    const storageKey = 'levellance-ep16-theme';

    function readSavedTheme() {
      try {
        return localStorage.getItem(storageKey);
      } catch (error) {
        return null;
      }
    }

    function saveTheme(theme) {
      try {
        localStorage.setItem(storageKey, theme);
      } catch (error) {
        // ธีมยังใช้งานได้ แม้เบราว์เซอร์ไม่อนุญาตให้บันทึกข้อมูล
      }
    }

    function applyTheme(theme) {
      const safeTheme = theme === 'dark' ? 'dark' : 'light';
      root.dataset.theme = safeTheme;
      themeButton.setAttribute('aria-pressed', String(safeTheme === 'dark'));
      themeButton.textContent = safeTheme === 'dark'
        ? '☀️ เปลี่ยนเป็น Light Mode'
        : '🌙 เปลี่ยนเป็น Dark Mode';
    }

    const savedTheme = readSavedTheme();
    const prefersDark = window.matchMedia
      && window.matchMedia('(prefers-color-scheme: dark)').matches;

    applyTheme(savedTheme || (prefersDark ? 'dark' : 'light'));

    themeButton.addEventListener('click', () => {
      const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
      applyTheme(nextTheme);
      saveTheme(nextTheme);
    });
  </script>
</body>
</html>

9. แบบฝึกหัด: ทดลองปรับ Design Tokens

10. ปัญหาที่พบบ่อยและแนวทางแก้ไข

11. สรุปแนวคิดสำคัญ