Skip to content

CSS theme

bluefox.css

Overrides Pico CSS custom properties with the Bluefox design tokens. No custom classes, no !important, no component-scoped styles.

Served from /static/bfx/bluefox.css after calling setup_components(app).

Design tokens

From the shared Bluefox THEME.md:

Token Value Usage
--pico-primary #D4652A Brand accent (buttons, links, focus)
--pico-background-color #FAFAF8 Page background
--pico-color #1A1A18 Primary text
--pico-muted-color #6B6B64 Secondary text
--pico-muted-border-color #E4E3DF Borders
--pico-font-family DM Sans Body typography
--pico-font-family-monospace JetBrains Mono Code typography
--pico-border-radius 0.375rem Consistent rounding

Dark mode

Dark overrides activate automatically via @media (prefers-color-scheme: dark). The dark palette uses warmer, desaturated variants of the Bluefox colors.

Customizing

To override specific values, add a CSS file after bluefox.css in your template's head block:

{% block head %}
<style>
  :root {
    --pico-primary: #2563eb;
    --pico-border-radius: 0.5rem;
  }
</style>
{% endblock %}