CSS theme reference¶
Architecture¶
Pico CSS 2.0.6 (CDN) ← Semantic HTML styling
└── bluefox.css ← Bluefox brand overrides (loaded by setup_components)
└── themes/*.css ← Named theme variants (financial, playful, minimal, roommate)
└── your.css ← Your custom theme (wins last)
All styling works through Pico CSS custom properties (--pico-*). No custom classes, no !important, no component-scoped styles. Your overrides always win because CSS custom properties follow normal cascade order.
bluefox.css — default tokens¶
Served from /static/bfx/bluefox.css after calling setup_components(app).
| Token | Light value | Usage |
|---|---|---|
--pico-font-family | "DM Sans", system-ui, sans-serif | Body typography |
--pico-font-family-monospace | "JetBrains Mono", monospace | Code typography |
--pico-font-size | 106.25% (17px) | Base font size |
--pico-line-height | 1.5 | Body line height |
--pico-font-weight | 400 | Default weight |
--pico-primary | #D4652A | Brand accent (buttons, links, focus) |
--pico-background-color | #FAFAF8 | Page background |
--pico-card-background-color | #fff | Card surfaces |
--pico-color | #1A1A18 | Primary text |
--pico-muted-color | #6B6B64 | Secondary text |
--pico-muted-border-color | #E4E3DF | Default borders |
--pico-border-radius | 0.375rem | Global rounding |
--pico-code-background-color | #1A1A18 | Code block background |
--pico-code-color | #E8E6E1 | Code block text |
--pico-secondary | (not overridden) | Uses Pico default |
Built-in themes¶
Four named themes ship with bluefox-components, activated via data-bfx-theme attribute:
| Theme | Font | Primary | Radius | Personality |
|---|---|---|---|---|
| financial | Inter + DM Serif Display headings | #1B3A5C navy | 0.25rem (4px) | Corporate, trustworthy |
| playful | Nunito | #7C3AED purple | 0.75rem (12px) | Consumer app, vibrant |
| minimal | IBM Plex Sans + Mono | #111 black | 0 (sharp) | Developer tool, brutalist |
| roommate | Outfit + DM Serif Display headings | #D4603A terracotta | 0.5rem (8px) | Warm SaaS, inviting |
Theme files are at /static/bfx/themes/{name}.css.
Dark mode¶
Dark overrides in bluefox.css activate automatically via @media (prefers-color-scheme: dark). The dark palette uses warmer, desaturated variants of the Bluefox colors.
Customizing¶
See the Make Your Own Theme guide for:
- Complete variable reference with all overridable properties
- Step-by-step instructions for creating a custom theme
- Extreme examples showing wildly different visual identities
- Structural overrides (button shapes, heading fonts, letter spacing)
- Dark mode support per theme
- LLM-friendly generation instructions