Theming
Reflet UI components use shadcn CSS variables exclusively, so they automatically match your existing theme.
How it works
Every component uses Tailwind classes like bg-card, text-foreground, and border-border that resolve to CSS custom properties defined in your globals.css. No hardcoded colors are used.
This means if you switch your shadcn theme (e.g., from Zinc to Slate, or from light to dark mode), the components update automatically.
CSS variables used
| Variable | Used for |
|---|---|
--background | Page background |
--foreground | Primary text color |
--card | Card background |
--card-foreground | Card text color |
--primary | Vote active state, links, accents |
--primary-foreground | Text on primary backgrounds |
--secondary | Tag backgrounds |
--secondary-foreground | Tag text |
--muted | Subtle backgrounds, code blocks |
--muted-foreground | Secondary text, metadata |
--border | Card borders, dividers |
--destructive | Error states |
Customizing components
Since components are installed as source files in your project, you can modify them directly. Common customizations:
- Change border radius by adjusting
rounded-xlclasses - Adjust spacing with different padding/margin values
- Modify the vote animation timing in the style block
- Add or remove fields (tags, author, description)
Dark mode
Components support dark mode out of the box. Status badges use Tailwind's dark: variant for specific color adjustments. Everything else inherits from your theme's CSS variables, which should already define dark mode values.