Customization
Branding
Logo
Replace the logo file at public/logo.svg with your own.
Colors
The project comes with several built-in color themes. You can switch themes by changing the ACTIVE_THEME variable in src/config/themes.ts.
// src/config/themes.ts
export const ACTIVE_THEME = "sunset";
Available Themes:
| Theme Key | Description |
|---|---|
neon |
Neon Green (Default) |
sunset |
Sunset Orange |
ocean |
Ocean Cyan |
pastel |
Pastel Lavender |
ember |
Ember Gold |
midnight |
Midnight Indigo |
forest |
Forest Emerald |
berry |
Wild Berry |
crimson |
Crimson Red |
royal |
Royal Violet |
teal |
Tropical Teal |
coffee |
Morning Coffee |
cyber |
Cyberpunk |
aqua |
Aqua Blue |
monochrome |
Monochrome |
If you want to create a custom theme, you can add a new entry to the themes object in src/config/themes.ts.
Customizing CSS Variables
You can also manually update the color variables in src/styles/globals.css if you prefer not to use the theme system.
Fonts
The project uses custom fonts. You can change them in src/styles/globals.css or by importing a different font in your root layout.
Adding Pages
To add a new page, create a file in src/routes/.
src/routes/about.tsx->/aboutsrc/routes/dashboard/settings.tsx->/dashboard/settings
See TanStack Router Documentation for more details.