Custom Theme Creation

Creating a Custom Theme

1. Rename the template: Rename custom.ts to whatever you want (e.g., my-theme.ts)
2. Modify colors: Update the color scales to match your design
3. Update config:
4. Set theme: "custom" in src/config.ts
5. Set customThemeFile: "my-theme" (filename without .ts extension)
6. Test: Use pnpm dev to see your theme changes in real-time

That's it! The system automatically finds and uses your custom theme.

Multiple Custom Themes

If you want multiple custom themes: 1. Copy custom.ts and rename it (e.g., my-cool-theme.ts, cool-green-theme.ts) 2. Modify the colors in each file to create different themes 3. Switch between themes by changing customThemeFile in src/config.ts (e.g., "my-cool-theme", "cool-green-theme")

Color Scale Guidelines

Primary Colors

• 50-100: Light backgrounds, subtle elements
• 200-300: Borders, dividers, muted text
• 400-500: Medium emphasis text, default colors
• 600-700: High emphasis text, interactive elements
• 800-900: Dark backgrounds, headers
• 950: Darkest backgrounds, high contrast text

Highlight Colors

• 400-500: Links, interactive elements (light mode)
• 600-700: Links, interactive elements (dark mode)
• Use sparingly: For accents, links, and call-to-action elements

Theme Testing

• Use pnpm dev for real-time theme preview
• Test both light and dark modes
• Verify accessibility with sufficient contrast ratios
• Check all components (buttons, forms, cards, etc.)

Best Practices

• Consistent naming: Use the same color scale structure as existing themes
• Accessibility: Ensure sufficient contrast between text and backgrounds
• Cohesion: Choose colors that work well together
• Documentation: Add comments explaining your color choices

Examples

See existing themes in src/themes/index.ts for reference implementations.