Themes

FFFFinance ships with 20+ built-in themes for the app and 8 themes for the documentation site. All switchable live with zero re-renders.

Dark themes

Theme	Accent	Vibe
Midnight	#00d4aa	Default — teal on near-black. Clean, professional.
Cyberpunk	#ff00ff	Magenta neon on dark navy. Maximum contrast.
Tokyo Night	#7aa2f7	Muted blue-purple. Calming focus.
Dracula	#bd93f9	Soft purple on charcoal. Dev favourite.
Nord	#88c0d0	Arctic blue-grey. Cool and minimal.
Catppuccin	#cba6f7	Pastel lavender. Cozy.

Light themes

Theme	Accent	Vibe
Light	#00a889	Clean, crisp, minimal.
Sepia	#704214	Warm parchment. Like reading a book.

Fonts

Font	Style
JetBrains Mono	Default — monospace, crisp numbers
Fira Code	Monospace with ligatures
Cascadia Code	Microsoft monospace with ligatures
Geist Mono	Vercel's monospace
IBM Plex Mono	Classic technical mono
Space Mono	Geometric monospace
Inter	Proportional — more spacious

How themes work

CSS custom properties applied to document.documentElement:

// store/useThemeStore.ts
for (const [key, value] of Object.entries(theme.tokens)) {
  document.documentElement.style.setProperty(key, value);
}

Every component uses var(--accent), var(--bg), var(--text) — switching is instant, no re-renders.

Design tokens

--accent       /* primary accent colour */
--accent-dim   /* accent at ~15% opacity */
--bg           /* page background */
--bg-panel     /* panel background */
--bg-hover     /* hover state */
--border       /* default border */
--text         /* primary text */
--text-muted   /* secondary text */
--danger       /* #ef4444 */
--warning      /* #f59e0b */

Switching themes

In the app: Settings > Appearance tab. Instant.

In the docs: Theme selector dropdown in the top navigation bar. Persists in your browser.