🎨CSS & Color

Modern CSS Theme Variables

Foundation for a flexible design system using CSS custom properties.

Explanation

CSS variables allow you to define colors and spacing in one place and reuse them throughout your stylesheet, making theme switching easy.

Examples

Theme Setup

Output

:root {
  --primary: #6366f1;
  --secondary: #a855f7;
  --bg: #ffffff;
  --text: #1e293b;
}

Code Examples

CSS Variables

:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --surface: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --radius: 0.75rem;
}

[data-theme='dark'] {
  --surface: #0f172a;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

Try it Now

Open in CSS Variables

💡 Tips

Use descriptive names like --primary instead of --blue
Define spacing and border-radius as variables too
Use HSL values for better programmatic control

⚠️ Common Pitfalls

Avoid deep nesting of variables which makes debugging hard