Theme & Colors

Customize your site's colors to match your server brand.

Color Format

All colors use RGB format without the rgb() wrapper. Just three numbers separated by spaces.

✓ Correct

'139 92 246'

✗ Incorrect

'rgb(139, 92, 246)'

○Finding RGB Values

Google "color picker" and use the RGB values shown. Remove the commas and use spaces instead.

Theme Configuration

src/config/site.config.ts

theme: {
  // Main brand color (buttons, links, accents)
  primary: '139 92 246',
  primaryHover: '124 58 237',

  // Secondary color (highlights, badges)
  secondary: '236 72 153',
  accent: '59 130 246',

  // Backgrounds
  background: '10 10 15',
  backgroundSecondary: '14 14 18',
  backgroundTertiary: '20 20 26',

  // Cards and surfaces
  surface: '24 24 30',
  surfaceHover: '34 34 42',

  // Borders
  border: '48 48 58',

  // Text colors
  textPrimary: '245 245 245',
  textSecondary: '190 190 190',
  textMuted: '130 130 130',

  // Status colors
  success: '34 197 94',
  warning: '250 204 21',
  error: '239 68 68',
}

Color Presets

Copy-paste these presets to quickly change your theme:

Purple (Default)

primary:'139 92 246'

secondary:'236 72 153'

Blue Ocean

primary:'59 130 246'

secondary:'34 211 238'

Emerald

primary:'34 197 94'

secondary:'132 204 22'

Ruby

primary:'239 68 68'

secondary:'249 115 22'

Gold Premium

primary:'250 204 21'

secondary:'249 115 22'

Monochrome

primary:'220 220 220'

secondary:'160 160 160'

Full Purple Theme

theme: {
  primary: '139 92 246',
  primaryHover: '124 58 237',
  secondary: '236 72 153',
  accent: '167 139 250',
  background: '10 10 15',
  backgroundSecondary: '14 14 18',
  backgroundTertiary: '20 20 26',
  surface: '24 24 30',
  surfaceHover: '34 34 42',
  border: '48 48 58',
  textPrimary: '245 245 245',
  textSecondary: '190 190 190',
  textMuted: '130 130 130',
  success: '34 197 94',
  warning: '250 204 21',
  error: '239 68 68',
}

Full Blue Theme

theme: {
  primary: '59 130 246',
  primaryHover: '37 99 235',
  secondary: '34 211 238',
  accent: '99 102 241',
  background: '10 10 15',
  backgroundSecondary: '14 14 18',
  backgroundTertiary: '20 20 26',
  surface: '24 24 30',
  surfaceHover: '34 34 42',
  border: '48 48 58',
  textPrimary: '245 245 245',
  textSecondary: '190 190 190',
  textMuted: '130 130 130',
  success: '34 197 94',
  warning: '250 204 21',
  error: '239 68 68',
}

Full Green Theme

theme: {
  primary: '34 197 94',
  primaryHover: '22 163 74',
  secondary: '132 204 22',
  accent: '74 222 128',
  background: '10 10 15',
  backgroundSecondary: '14 14 18',
  backgroundTertiary: '20 20 26',
  surface: '24 24 30',
  surfaceHover: '34 34 42',
  border: '48 48 58',
  textPrimary: '245 245 245',
  textSecondary: '190 190 190',
  textMuted: '130 130 130',
  success: '34 197 94',
  warning: '250 204 21',
  error: '239 68 68',
}

△Dark Theme Only

This template is designed for dark themes. Light backgrounds are not recommended and may require additional CSS changes.