Theming

Customize your brand colors by editing app/config/theme.config.ts.

How it works

The theme file exports a color map organized by sections. Tailwind CSS reads these colors and generates utility classes automatically.

Editing colors

Open app/config/theme.config.ts and change the color values:

export const themeColors = {
  // Your brand's primary color (buttons, links, highlights)
  'default-primary': '#ff6b00',

  // Header
  'header-bg': '#1a0a00',
  'header-register-bg': '#ff6b00',
  'header-register-text': '#ffffff',
  'header-login-bg': 'transparent',
  'header-login-text': '#ffffff',

  // Sidebar
  'sidebar-bg': '#1f1200',
  'sidebar-links': '#ffffff',

  // Footer
  'footer-bg-primary': '#1a0a00',
  'footer-links': '#a0a0a0',

  // Auth modals
  'auth-bg-primary': '#1f1200',
  'auth-button-bg': '#ff6b00',
  'auth-button-text': '#ffffff',

  // ... more colors
};

After saving, restart the dev server (pnpm dev) to see the changes.

Color sections

Section	What it affects
default-*	Global colors (primary, error, success, etc.)
header-*	Top navigation bar
sidebar-*	Side navigation menu
footer-*	Page footer
auth-*	Login and register modals
game-*	Game cards and overlays

Tips

• Use your brand's primary color for default-primary, header-register-bg, and auth-button-bg
• Keep good contrast between backgrounds and text colors
• Test both desktop and mobile views after changing colors