Skip to content
Axiomatic Color

HTML / Vanilla JS Integration

This guide shows you how to integrate the Axiomatic Color into a plain HTML project.

1. Setup

Section titled “1. Setup”

First, install the CLI and generate your theme CSS.

Terminal window
npm install -D @axiomatic-design/color
npx axiomatic init
npx axiomatic build --out ./public/theme.css

Link the CSS in your HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/theme.css" />
    <title>My App</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

2. Using Surfaces

Section titled “2. Using Surfaces”

In HTML, you apply surfaces using the generated utility classes.

<!-- The page surface sets the background for the body -->
<body class="surface-page">
  <main style="padding: 2rem;">
    <!-- A card surface -->
    <div class="surface-card" style="padding: 2rem; border-radius: 8px;">
      <!-- Use CSS variables for text colors -->
      <h2 style="color: var(--text-high-token)">Hello World</h2>
      <p style="color: var(--text-subtle-token)">
        This card is automatically themed based on its context.
      </p>
    </div>
  </main>
</body>

3. The Theme Toggle

Section titled “3. The Theme Toggle”

To handle Dark Mode, add a simple script to toggle the data-theme attribute.

<button id="theme-toggle">Toggle Theme</button>


<script>
  const toggle = document.getElementById("theme-toggle");


  // 1. Initialize state
  const systemPrefersDark = window.matchMedia(
    "(prefers-color-scheme: dark)"
  ).matches;
  const savedTheme = localStorage.getItem("theme");
  let currentTheme = savedTheme || (systemPrefersDark ? "dark" : "light");


  document.documentElement.setAttribute("data-theme", currentTheme);
  updateButtonText();


  // 2. Handle click
  toggle.addEventListener("click", () => {
    currentTheme = currentTheme === "light" ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", currentTheme);
    localStorage.setItem("theme", currentTheme);
    updateButtonText();
  });


  function updateButtonText() {
    toggle.textContent =
      currentTheme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode";
  }
</script>