Import a shadcn or CSS color theme

1. Copy the theme blocks

Copy one :root block followed by an optional .dark block. SwatchSpring also accepts supported root [data-theme="dark"] selectors. Both blocks may sit inside the same @layer base, or both outside a layer.

Import the token blocks, not your complete globals.css. Keep framework imports, component rules, media queries, and custom variants in your project. A supported @theme mapping block can be preserved, but is not executed in the preview.

This small example deliberately includes low-contrast text so you can try the repair workflow:

:root {
  --background: #ffffff;
  --foreground: #aaaaaa;
  --primary: #234567;
  --primary-foreground: #ffffff;
}
.dark {
  --background: #121212;
  --foreground: #555555;
  --primary: #8baed1;
  --primary-foreground: #121212;
}

In shadcn, semantic pairs such as primary and primary-foreground control a surface and the content on it. See the official shadcn theming documentation for how those variables connect to your components.

2. Review before applying

1. Open SwatchSpring and choose Import a theme.
2. Paste your blocks and choose Review theme, or choose a CSS file to review it.
3. Inspect the Light and Dark previews, role mappings, aliases, and preserved-only values. Unmapped roles use preview defaults; those defaults are not added to your export.
4. If the review requires it, acknowledge the sRGB approximations before applying. HSL and OKLCH previews can differ from the original color space.
5. Choose Apply imported theme. This replaces the color theme and keeps your gradient. The undo action restores the pre-import workspace, discarding edits made since that replacement.

What can be edited?

Supported opaque HEX, numeric RGB/HSL/OKLCH, legacy HSL channels, and resolvable color aliases can be previewed. Aliases are read-only: edit the literal they resolve to. Non-color values such as radius are preserved without a color check.

The importer rejects ambiguous input such as duplicate declarations, unresolved or circular references, unsupported selectors, and resource-loading CSS. Files are limited to 16,000 source characters and 240 declarations. Review diagnostics describe the specific problem.

With no dark block, root colors apply to both previews. With a dark block, undeclared variables inherit from the root. Check both modes after changing a shared source.

3. Keep the rest of your stylesheet

Use contrast repair if you need to improve readability. Then open Export and choose Download theme. Imported CSS exports as CSS, retaining names, aliases, and unedited source. Edited colors use HEX, except legacy HSL channels retain their notation.

Merge the edited theme blocks back into your project; do not replace a complete application stylesheet with this token-only export. Test the result in your actual components.