Theme Input
Paste raw CSS variables. The preview honors light tokens and optional dark tokens.
Saved locally in this browser. Applies only to the preview panel.
Semantic UI primitives with a familiar theme model.
PaleUI gives you plain HTML components styled with CSS variables, so shadcn-style themes work without bringing along a JS component runtime.
Paste a theme and check it against real component surfaces.
Drop in a standard shadcn variable block with :root and
an optional .dark section. The preview stays scoped to this
page section, so you can validate tokens without changing the rest of the site.
Theme release review
Check the same token set across actions, supporting copy, state chips, and denser surfaces before you publish.
This preview is built like a small product workflow, so buttons and badges appear where they naturally would in a UI rather than as isolated examples.
Page review queue
Use queued surfaces to judge how badges, counters, and utility actions sit together.
Landing page refresh
Checks how primary actions and neutral surfaces sit together in a calmer layout.
Docs shell review
Good for checking secondary emphasis, quiet borders, and contrast on long-running pages.
Alert state fallback
Stress-tests destructive accents and whether warning states still read clearly.
Theme notes
Typography still matters after the color pass.
Headings, body copy, code, and quiet metadata should all remain comfortable once the theme is doing more than rendering swatches.
Use this area to confirm your theme still reads well when a page mixes
primary information, supporting text, and inline code such as
--radius or --ring.
:root {
--background: oklch(...);
--primary: oklch(...);
--ring: oklch(...);
}Publish checklist
One support surface for guidance and edge-case actions.
Theme review tip
Toggle the preview into dark mode to confirm your.dark tokens hold up
on alerts, borders, and muted text.
What should I look at first?
Start with primary buttons, muted copy, and border contrast. Those three usually reveal
token problems quickly.
How does dark mode work here?
The preview container gets a
dark class, so the same pasted variables can
be checked in both light and dark contexts.
Does this affect the rest of the site?
No. The pasted CSS is rewritten to target this preview section only, leaving the global
nav and other pages alone.