Creating Themes

This guide walks through adding a new theme to PIP AI.

Step 1: Define the Theme

Add a new entry to the themes object in app/constants/themes.ts:

typescript

export type ThemeId = 'dark' | 'light' | 'sandstone' | 'neo-mint' | 'corporate' | 'ocean';

export const themes: Record<ThemeId, Theme> = {
  // ... existing themes
  ocean: {
    id: 'ocean',
    label: 'Ocean',
    description: 'Deep blue aquatic theme',
    isLight: false,
    swatches: {
      bg: '#0a1628',
      primary: '#e0e8f0',
      accent: '#38bdf8',
    },
    textColorClass: 'text-[#e0e8f0]',
    tokens: {
      fontDisplay: '"Inter", sans-serif',
      fontBody: '"Inter", sans-serif',
      fontMono: '"JetBrains Mono", monospace',
      bodyBg: '#0a1628',
      bodyText: '#e0e8f0',
      mutedText: 'rgba(224, 232, 240, 0.6)',
      panelBg: 'rgba(10, 22, 40, 0.92)',
      panelBgSolid: '#0d1a30',
      borderColor: 'rgba(56, 189, 248, 0.15)',
      borderColorStrong: 'rgba(56, 189, 248, 0.3)',
      accent: '#38bdf8',
      accentHover: '#7dd3fc',
      success: '#34d399',
      warning: '#fbbf24',
      error: '#f87171',
      scrollbarTrack: 'rgba(56, 189, 248, 0.06)',
      scrollbarThumb: 'rgba(56, 189, 248, 0.25)',
      scrollbarThumbHover: 'rgba(56, 189, 248, 0.4)',
      checkboxBorder: 'rgba(56, 189, 248, 0.2)',
      checkboxBg: 'rgba(10, 22, 40, 0.6)',
      checkboxCheckedBg: '#38bdf8',
      checkboxCheckedBorder: '#38bdf8',
      checkboxCheck: '#0a1628',
      noiseOpacity: '0.3',
      heroGradientColor: 'rgba(56, 189, 248, 0.05)',
    },
  },
};

Step 2: Update the ThemeId Type

Add your new theme ID to the ThemeId union type:

typescript

export type ThemeId = 'dark' | 'light' | 'sandstone' | 'neo-mint' | 'corporate' | 'ocean';

Step 3: Add Custom Fonts (Optional)

If your theme uses custom fonts, add them to assets/css/main.css:

css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Step 4: Test

Start the dev server: npm run dev
Open the theme switcher in the header
Select your new theme
Verify all UI elements render correctly
Check both light and dark backgrounds
Verify text readability across all surfaces

Token Checklist

Ensure all tokens provide adequate contrast:

[ ] bodyText on bodyBg — WCAG AA contrast (4.5:1)
[ ] mutedText on bodyBg — At least 3:1
[ ] accent on bodyBg — Clearly visible
[ ] success/warning/error — Distinguishable from each other
[ ] panelBg — Readable text on panels
[ ] borderColor — Visible against panel backgrounds

Creating Themes ​

Step 1: Define the Theme ​

Step 2: Update the ThemeId Type ​

Step 3: Add Custom Fonts (Optional) ​