Theming

The dashboard and the charts share one palette, so a color you set shows up in both. INSIGHTS_STYLE picks one of the Basecoat styles, INSIGHTS_THEME sets the colors with the names of the shadcn/ui themes:

INSIGHTS_STYLE = "sera"
INSIGHTS_THEME = "blue"

Styles #

vega (the default), nova, maia, lyra, mira, luma, sera and rhea.

Colors #

An accent changes the primary color and the five chart colors. The chart bars and lines use the middle color of the ramp, in light and dark mode.

Accent	Primary (light)	Primary (dark)	Chart colors
`amber`
`blue`
`cyan`
`emerald`
`fuchsia`
`green`
`indigo`
`lime`
`orange`
`pink`
`purple`
`red`
`rose`
`sky`
`teal`
`violet`
`yellow`

A base changes the greys of the background, cards and borders, and gives grey charts. The swatches are the background, card, muted and border color.

Base	Light	Dark
`neutral`
`stone`
`zinc`
`mauve`
`olive`
`mist`
`taupe`

The default is the shadcn neutral base with the blue Basecoat charts. Any hex color is an accent too, see below.

Your own colors #

Combine them, or set single colors, with a dict. accent takes a theme name or any hex color, light and dark set colors on top of it:

INSIGHTS_THEME = {
    "base": "zinc",
    "accent": "blue",
    "dark": {"card": "#111827", "border": "#1f2937"},
}

A color is one of the shadcn variables with underscores, written as "#rrggbb": background, foreground, card, muted_foreground, border, primary, primary_foreground, sidebar_primary, chart_1 to chart_5 and the rest of the shadcn set.

All color names

background, foreground, card, card_foreground, popover, popover_foreground, primary, primary_foreground, secondary, secondary_foreground, muted, muted_foreground, accent, accent_foreground, destructive, border, input, ring, chart_1 to chart_5, sidebar, sidebar_foreground, sidebar_primary, sidebar_primary_foreground, sidebar_accent, sidebar_accent_foreground, sidebar_border and sidebar_ring.

A chart uses card as its background, foreground for its text and chart_3 for its bars and lines. Anything that is not a known name with a "#rrggbb" value is ignored, and manage.py check tells you what (insights.W007 to W009, see System checks).

A single accent color, for example "#ec4899", gives a primary color and a ramp of five chart colors that is lighter at the start and darker at the end:

INSIGHTS_THEME = {"accent": "#ec4899"}

Light and dark #

INSIGHTS_DEFAULT_THEME is "dark" or "light", the mode used until a visitor picks one in the dashboard.

Updating the colors #

The theme colors come from the shadcn registry. To update them, in a checkout of Django Insights:

python scripts/generate_palettes.py
ruff format django_insights/palettes.py