CSS Variables with Claude Code

Streamline Style Management With CSS Variables

CSS variables (custom properties) let you centrally manage design values such as colors and sizes, dramatically simplifying theme switching and responsive design. With Claude Code, you can design systematic design tokens and go all the way from design to implementation in a single pass.

Defining Design Tokens

> Define CSS variables as design tokens to use across the entire project.
> Include color, typography, spacing, and shadows.

:root {
  /* Color palette */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-500: #6b7280;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic colors */
  --color-bg: var(--color-gray-50);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-border: var(--color-gray-100);
  --color-accent: var(--color-primary-500);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Borders */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

Dark Mode Support

/* Override semantic colors for the dark theme */
[data-theme="dark"],
.dark {
  --color-bg: var(--color-gray-900);
  --color-text: var(--color-gray-50);
  --color-text-muted: var(--color-gray-400, #9ca3af);
  --color-border: var(--color-gray-800);
  --color-accent: var(--color-primary-400, #60a5fa);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Follow OS settings */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-gray-900);
    --color-text: var(--color-gray-50);
    --color-text-muted: var(--color-gray-400, #9ca3af);
    --color-border: var(--color-gray-800);
  }
}

Component-Level Variables

/* Button component */
.btn {
  --btn-bg: var(--color-accent);
  --btn-text: white;
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
  --btn-radius: var(--radius-md);

  background: var(--btn-bg);
  color: var(--btn-text);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.9;
}

/* Variants only override variables */
.btn--secondary {
  --btn-bg: var(--color-gray-100);
  --btn-text: var(--color-text);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-text: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn--sm {
  --btn-padding-x: var(--space-3);
  --btn-padding-y: var(--space-1);
  font-size: var(--font-size-sm);
}

Operating on Variables From JavaScript

// Theme switching
function setTheme(theme: 'light' | 'dark') {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

// Dynamically change the accent color
function setAccentColor(color: string) {
  document.documentElement.style.setProperty('--color-accent', color);
}

// Read a CSS variable
function getCssVariable(name: string): string {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(name)
    .trim();
}

Responsive Variables

:root {
  --content-width: 100%;
  --font-size-heading: var(--font-size-2xl);
  --section-padding: var(--space-6);
}

@media (width >= 768px) {
  :root {
    --content-width: 720px;
    --font-size-heading: var(--font-size-3xl);
    --section-padding: var(--space-8);
  }
}

@media (width >= 1024px) {
  :root {
    --content-width: 960px;
    --section-padding: var(--space-12);
  }
}

.container {
  max-width: var(--content-width);
  padding: var(--section-padding);
  margin: 0 auto;
}

Summary

CSS variables are an essential technology for building dark mode and a design system. With Claude Code, you can efficiently go from systematic design-token definitions through component-level usage. Combined with Flexbox and CSS Grid, you can build maintainable stylesheets. For the full CSS variables spec, see MDN Web Docs.