Theme System
PIP AI ships with 5 built-in themes, each with comprehensive design tokens covering colors, fonts, surfaces, borders, and status indicators.
Available Themes
| Theme | ID | Label | Type | Accent | Description |
|---|---|---|---|---|---|
| Midnight | dark | Midnight | Dark | #ffffff | Deep dark theme with crisp white accents |
| Daylight | light | Daylight | Light | #0b0b0f | Clean light theme with subtle warmth |
| Sandstone | sandstone | Sandstone | Dark | #c9a86c | Warm earthy tones with desert vibes |
| Neo Mint | neo-mint | Neo Mint | Dark | #5fd4b8 | Cool minimal aesthetic with mint accents |
| Corporate | corporate | Corporate | Light | #3B82F6 | Clean professional look with blue accents |
The default theme is corporate.
Theme Architecture
Themes are defined in app/constants/themes.ts and managed through:
app/constants/themes.ts— Theme definitions with tokensapp/stores/app.ts— Theme state in Pinia store (useAppStore)app/plugins/theme.client.ts— Client-side theme initialization from localStorage
Theme Tokens
Each theme defines a comprehensive set of design tokens:
Font Tokens
| Token | Description | Example (Corporate) |
|---|---|---|
fontDisplay | Heading/display font | SF Pro Display |
fontBody | Body text font | SF Pro Text |
fontMono | Monospace/code font | SF Mono |
Color Tokens
| Token | Description | Example (Corporate) |
|---|---|---|
bodyBg | Page background | #F8F9FB |
bodyText | Primary text | #1F2937 |
mutedText | Secondary text | #6B7280 |
accent | Primary accent | #3B82F6 |
accentHover | Accent hover state | #2563EB |
success | Success indicator | #10B981 |
warning | Warning indicator | #F59E0B |
error | Error indicator | #EF4444 |
Surface Tokens
| Token | Description |
|---|---|
panelBg | Panel background (with transparency) |
panelBgSolid | Solid panel background |
borderColor | Default border color |
borderColorStrong | Emphasized border color |
UI Element Tokens
| Token | Description |
|---|---|
scrollbarTrack | Scrollbar track color |
scrollbarThumb | Scrollbar thumb color |
checkboxBg | Checkbox background |
checkboxCheckedBg | Checked checkbox background |
noiseOpacity | Hero noise overlay opacity |
Theme Switching
typescript
const appStore = useAppStore()
// Set theme
appStore.setTheme('neo-mint')
// Cycle to next theme
import { getNextThemeId } from '~/constants/themes'
const nextId = getNextThemeId(appStore.currentTheme)
appStore.setTheme(nextId)Theme selection is persisted to localStorage and restored on page load by the theme.client.ts plugin.
Helper Functions
typescript
import { themes, getTheme, validateThemeId, getNextThemeId, themeList } from '~/constants/themes'
// Get theme object by ID
const theme = getTheme('corporate')
// Validate and fallback to default
const themeId = validateThemeId(someString) // Returns valid ThemeId or 'corporate'
// Get all themes as array
const allThemes = themeList
// Cycle themes
const nextId = getNextThemeId('dark') // → 'light'