Theme System
6 built-in color presets with oklch CSS variables and dark/light mode support.
LaunchFst ships with 6 theme presets built on oklch color space. Every color is a CSS variable — no hardcoded values anywhere.
Available Presets
| Preset | Primary Hue | Best For |
|---|---|---|
teal | 200 | SaaS, productivity, dev tools |
blue | 250 | Enterprise, finance, trust |
purple | 285 | Creative, AI, design tools |
orange | 45 | Marketplaces, food, energy |
green | 155 | Health, sustainability, finance |
rose | 350 | Social, lifestyle, fashion |
Switching Themes
Change one line in lib/config/site.ts:
export const siteConfig: SiteConfig = {
theme: "purple", // teal | blue | purple | orange | green | rose
// ...
}The theme is applied at the root layout level. All shadcn/ui components, blocks, and custom components automatically pick up the new colors through CSS variables.
CSS Variables
Each preset defines 31 CSS variables for both light and dark modes using the oklch() color function. The core variables are:
--background /* Page background */
--foreground /* Default text */
--card /* Card backgrounds */
--card-foreground /* Text on cards */
--popover /* Popover/dropdown backgrounds */
--popover-foreground /* Text in popovers */
--primary /* Brand color, buttons, links */
--primary-foreground /* Text on primary backgrounds */
--secondary /* Secondary surfaces */
--secondary-foreground
--muted /* Subdued backgrounds */
--muted-foreground /* Subdued text */
--accent /* Hover states, highlights */
--accent-foreground
--destructive /* Error states */
--border /* Borders and dividers */
--input /* Input field borders */
--ring /* Focus rings */
--chart-1 to --chart-5 /* Chart colors (5 vars) */
/* Sidebar-specific */
--sidebar
--sidebar-foreground
--sidebar-primary
--sidebar-primary-foreground
--sidebar-accent
--sidebar-accent-foreground
--sidebar-border
--sidebar-ringDark/Light Mode
Every preset includes both light and dark definitions. The theme provider handles mode switching automatically. Users can toggle between modes, and the correct variable set is applied via the dark class on <html>.
Creating a Custom Theme
- Open
lib/themes/index.ts - Copy an existing preset (e.g.
teal) - Add your preset name to the
ThemePresettype union - Modify the oklch values for both
lightanddarkobjects
export type ThemePreset = "teal" | "blue" | "purple" | "orange" | "green" | "rose" | "custom"
export const themes: Record<ThemePreset, { light: Record<string, string>; dark: Record<string, string> }> = {
// ...existing presets
custom: {
light: {
"--primary": "oklch(0.55 0.15 160)",
// ... all 28 variables
},
dark: {
"--primary": "oklch(0.65 0.15 160)",
// ... all 28 variables
},
},
}Then set theme: "custom" in siteConfig.
oklch Primer
oklch uses three channels: Lightness (0-1), Chroma (0-0.37), and Hue (0-360). Keeping chroma consistent across variables produces a cohesive palette. Adjust hue to shift the entire color family.