Theming¶

How to customize the Bluefox visual theme.

How it works¶

bluefox.css only overrides Pico CSS custom properties. No custom classes, no !important. This means you can:

1. Override any Pico variable in your own CSS
2. Add a second theme file alongside bluefox.css
3. Use Pico's built-in data-theme attribute for manual theme switching

Overriding variables¶

Add a <style> block or CSS file after bluefox.css:

{% block head %}
<style>
  :root {
    --pico-primary: #8B5CF6;
    --pico-primary-hover: #7C3AED;
    --pico-border-radius: 0.5rem;
  }
</style>
{% endblock %}

Dark mode¶

By default, the theme follows the user's OS preference via prefers-color-scheme. Both light and dark palettes are defined in bluefox.css.

Available variables¶

See the CSS theme reference for the full list of overridden Pico variables.