Dynamic Theme Generator

Generate and preview themes using CSS variables.

Light Theme

BackgroundForegroundPrimary

Dark Theme

BackgroundForegroundPrimary

Generated CSS

:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #007bff;
}

.dark {
  --background: #1a202c;
  --foreground: #ffffff;
  --primary: #63b3ed;
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

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

Live Preview

Light Theme

This is some example text.

Dark Theme

This is some example text.