Theming

Harlow UI uses CSS custom properties for a complete dark/light theming system. Every color, radius, and shadow is tokenized for effortless customization.

Color Tokens

The complete color palette, automatically switching between light and dark modes.

Brand — iPhone 17 Pro Max Titanium Orange

Surfaces & Backgrounds

Semantic — Financial States

Chart Palette

Borders & Typography

Customizing Colors

Override any token in your globals.css to match your brand:

globals.css

1:root {
2  --primary: 24 100% 50%;          /* Your brand color */
3  --primary-foreground: 0 0% 100%;
4  --success: 152 69% 42%;
5  --warning: 38 92% 50%;
6  --destructive: 0 84% 60%;
7}
8
9.dark {
10  --primary: 24 100% 55%;
11  --background: 220 16% 6%;
12  --foreground: 220 14% 96%;
13  --card: 220 15% 9%;
14  --border: 220 13% 15%;
15}

Typography Tokens

globals.css

1@theme inline {
2  --font-sans: 'Lato', 'Lato Fallback';
3  --font-display: 'Sora', 'Sora Fallback';
4  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
5
6  /* Type scale */
7  --text-display: 3.5rem;
8  --text-h1: 2.5rem;
9  --text-h2: 2rem;
10  --text-h3: 1.5rem;
11  --text-body: 1rem;
12  --text-body-lg: 1.125rem;
13  --text-sm: 0.875rem;
14  --text-xs: 0.75rem;
15  --text-mono-lg: 1.5rem;
16}

Dark Mode

Dark mode is handled via the class strategy using next-themes. Toggle between modes with the built-in FqThemeToggle component.

Usage

import { FqThemeToggle } from '@/components/harlowui/fq-theme-toggle'
// In your header or nav:
<FqThemeToggle />