S

Color Theming

Configure themes with light/dark mode support and create custom color schemes.

  • • Code-based configuration — set default theme in config
  • • User preference storage — themes persist across sessions
  • • Light/dark mode toggle — independent of color theme
  • • CSS custom properties — easy customization

Available Themes

13 built-in color themes covering a wide range of styles:

warm— Terracotta accent
violet— Purple gradients
minimal— Black & white
indigo— Blue/purple depth
emerald— Green accent
ocean— Teal & blues
cosmic— Cosmic dusk
celestial— Warm yellows
cherry— Cherry blossom
forest— Earth greens
neon— Coral & orange
retro— Synthwave
mono— Gray accents

Configure Default Theme

src/lib/themeConfig.ts
1export const THEME_CONFIG = {
2  defaultColorTheme: "warm", // Change this
3  persistTheme: true,
4  allowThemeSwitching: true,
5  defaultMode: "system", // "light" | "dark" | "system"
6};

Create Custom Themes

 1// src/lib/colorThemes.ts
 2export const colorThemes = {
 3  // Your custom theme
 4  sunset: {
 5    light: {
 6      primary: "25 47% 55%",
 7      "primary-foreground": "210 40% 98%",
 8      secondary: "35 100% 95%",
 9      accent: "45 100% 85%",
10    },
11    dark: {
12      primary: "25 85% 60%",
13      "primary-foreground": "25 47% 10%",
14      secondary: "25 47% 10%",
15      accent: "25 47% 15%",
16    },
17  },
18};

Colors use HSL format without the hsl() wrapper.

Theme Structure

Core Colors

  • primary — Main brand color
  • secondary — Supporting color
  • background — Page background
  • foreground — Main text

UI Colors

  • card — Card backgrounds
  • muted — Subtle backgrounds
  • border — Element borders
  • ring — Focus rings

Theme-Aware Components

✓ Recommended

1<div className="bg-background text-foreground">
2  <p className="text-muted-foreground">Text</p>
3</div>
4

5<button className="bg-primary text-primary-foreground">
6  Button
7</button>

✗ Avoid

1<div className="bg-white text-black">
2  Breaks in dark mode
3</div>
4

5<div style={{ backgroundColor: '#fff' }}>
6  Ignores theme
7</div>

Theme Hooks

1import { useTheme } from "~/hooks/useTheme";
2import { useColorTheme } from "~/hooks/useColorTheme";
3

4// Toggle light/dark mode
5const { isDark, toggle } = useTheme();
6

7// Switch color theme
8const { colorTheme, setColorTheme } = useColorTheme();
9setColorTheme('warm');

Next: Blog System

MDX content with SEO optimization

Continue →