Theme Format Converter

Convert between JavaScript theme objects and CSS custom properties

Theme Manager
Currently converting from JavaScript Object to CSS
Input (JavaScript Object)
Paste your JavaScript theme object here
Output (CSS)
Your converted CSS custom properties
Format Information

JavaScript Object Format:

Should contain `light` and `dark` objects with color properties:

{
  light: {
    background: 'oklch(1 0 0)',
    foreground: 'oklch(0.141 0.005 285.823)',
    // ... more properties
  },
  dark: {
    background: 'oklch(0.141 0.005 285.823)',
    foreground: 'oklch(0.985 0 0)',
    // ... more properties
  }
}

CSS Format:

Uses `:root` for light theme and `.dark` for dark theme:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
}