Theme Customization
Customize the Launch77 theme to match your brand identity. Override design tokens to create a unique visual style while maintaining accessibility and consistency.
All Launch77 components automatically inherit your custom theme colors through CSS variables.
Quick Start
Create a brand.css File
Create app/brand.css in your marketing site to override default theme colors. Import it in your root layout.
File: app/brand.css
:root {
/* Override brand colors */
--color-primary: 221 83% 53%; /* Your brand blue */
--color-primary-foreground: 0 0% 100%; /* White text on brand blue */
--color-accent: 142 76% 36%; /* Your accent green */
--color-accent-foreground: 0 0% 100%; /* White text on accent green */
}
.dark {
/* Optional: Different colors for dark mode */
--color-primary: 217 91% 60%; /* Lighter blue for dark mode */
--color-primary-foreground: 222 47% 11%; /* Dark text on light blue */
}File: app/layout.tsx
import '@launch/theme' // Launch77 defaults
import './brand.css' // Your brand overrides
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Step-by-Step Customization
Choose Your Brand Colors
Select your primary brand color and accent color. These will be used for buttons, links, active states, and other interactive elements.
Recommended Tools:
- • uicolors.app - Generate Tailwind color palettes
- • hslpicker.com - Pick colors in HSL format
- • coolors.co - Generate color palettes
Convert to HSL Format
Launch77 uses HSL (Hue, Saturation, Lightness) format for all colors. Convert your hex or RGB colors to HSL without the hsl() wrapper.
Hex color:
#3B82F6
HSL format:
221 83% 53%
Note: Use space-separated values without hsl() or commas. Tailwind adds the wrapper automatically.
Choose Foreground Colors
For each background color, select a foreground (text) color that meets WCAG AA contrast requirements (4.5:1 minimum).
Common Foreground Colors:
- • White:
0 0% 100%- Use on dark backgrounds - • Dark gray:
222 47% 11%- Use on light backgrounds
Always test contrast ratios using the Contrast page before deploying.
Update brand.css
Add your custom colors to brand.css. Start with just primary and accent colors.
:root {
/* Your brand colors */
--color-primary: 221 83% 53%; /* Brand blue */
--color-primary-foreground: 0 0% 100%; /* White */
--color-accent: 142 76% 36%; /* Brand green */
--color-accent-foreground: 0 0% 100%; /* White */
}Test Your Theme
Browse your site to verify all components look correct with your new colors. Check:
- • Button hover and active states
- • Link colors and underlines
- • Form inputs and focus rings
- • Card borders and shadows
- • Sidebar active/hover states
Use DevTools to inspect:
Right-click any element → Inspect → Computed tab to see which CSS variables are being applied.
Advanced Customization
Override Additional Tokens
Beyond brand colors, you can override any of the 17 theme tokens. See the Design Tokens page for a complete list.
Example: Custom Background Colors
:root {
/* Custom background */
--color-background: 0 0% 98%; /* Off-white instead of pure white */
--color-foreground: 222 47% 11%; /* Dark gray text */
/* Custom card styling */
--color-card: 0 0% 100%; /* Pure white cards */
--color-card-foreground: 222 47% 11%; /* Dark gray text on cards */
/* Custom muted colors */
--color-muted: 210 40% 96%; /* Light blue-gray */
--color-muted-foreground: 215 16% 47%; /* Medium gray */
}Example: Dark Mode Overrides
.dark {
/* Different colors for dark mode */
--color-background: 222 47% 11%; /* Dark blue-gray */
--color-foreground: 210 40% 98%; /* Off-white text */
--color-primary: 217 91% 60%; /* Lighter primary for dark mode */
--color-primary-foreground: 222 47% 11%; /* Dark text on light primary */
--color-card: 222 47% 14%; /* Slightly lighter than background */
--color-card-foreground: 210 40% 98%; /* Off-white text */
}Complete Token Reference
All Customizable Tokens
Template
brand.css Template
Copy this template to get started with your custom theme:
:root {
/* Base colors */
--color-background: 0 0% 100%;
--color-foreground: 222 47% 11%;
/* Card colors */
--color-card: 0 0% 100%;
--color-card-foreground: 222 47% 11%;
/* Popover colors */
--color-popover: 0 0% 100%;
--color-popover-foreground: 222 47% 11%;
/* Brand colors - CUSTOMIZE THESE */
--color-primary: 222 47% 11%;
--color-primary-foreground: 210 40% 98%;
--color-accent: 210 40% 96%;
--color-accent-foreground: 222 47% 11%;
/* Muted colors */
--color-muted: 210 40% 96%;
--color-muted-foreground: 215 16% 47%;
/* Secondary colors */
--color-secondary: 210 40% 96%;
--color-secondary-foreground: 222 47% 11%;
/* Feedback colors */
--color-destructive: 0 84% 60%;
--color-destructive-foreground: 210 40% 98%;
/* Border colors */
--color-border: 214 32% 91%;
--color-input: 214 32% 91%;
--color-ring: 222 47% 11%;
/* Border radius */
--radius: 0.5rem;
}
.dark {
/* Dark mode overrides - OPTIONAL */
--color-background: 222 47% 11%;
--color-foreground: 210 40% 98%;
--color-card: 222 47% 11%;
--color-card-foreground: 210 40% 98%;
--color-popover: 222 47% 11%;
--color-popover-foreground: 210 40% 98%;
--color-primary: 210 40% 98%;
--color-primary-foreground: 222 47% 11%;
--color-accent: 217 33% 17%;
--color-accent-foreground: 210 40% 98%;
--color-muted: 217 33% 17%;
--color-muted-foreground: 215 20% 65%;
--color-secondary: 217 33% 17%;
--color-secondary-foreground: 210 40% 98%;
--color-destructive: 0 63% 31%;
--color-destructive-foreground: 210 40% 98%;
--color-border: 217 33% 17%;
--color-input: 217 33% 17%;
--color-ring: 212 72% 59%;
}