Theme
Customize the appearance of your application with CSS variables and semantic tokens.
The marketing and dashboard applications share the same theme configuration through CSS variables.
Customize the theme once and it applies to both applications.
Customize the Theme
Generate a theme
Go to shadcn/studio and generate a theme for your brand.
Copy the generated CSS variables.
Update the theme variables
Open packages/configs/tailwind-config/styles.css and replace the existing CSS variables with the ones you copied.
This file contains the semantic tokens used by both applications.
Dark mode
Repeat the process for the dark mode theme, updating the variables inside the .dark class selector.
Using Semantic Tokens
Always use semantic tokens in your components instead of raw color values:
// Good: Semantic tokens
<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground" />
// Bad: Raw values
<div className="bg-gray-100 text-gray-900" />