Theming

One setting. Every component.

djust ships 69 colour presets, each with a light and a dark mode. Components read their colours from theme tokens, so switching a preset repaints all of them at once. Pick one: only the preview changes, the link is yours to share, and a heart tells us which ones you love.

djust.org

djust · light — djust.org brand — dark with rust orange and Django green accents

17 text pairs below WCAG AA contrast
  • light: text on primary 2.7:1
  • light: text on secondary 3.7:1
  • light: text on muted 4.2:1
  • light: text on accent 3.8:1
  • light: text on destructive 3.6:1
  • light: text on success 2.5:1
  • light: text on warning 2.1:1
  • light: text on info 2.8:1
  • light: text on brand 2.7:1
  • dark: text on primary 2.6:1
  • dark: text on secondary 2.2:1
  • dark: text on accent 2.5:1
  • dark: text on destructive 3.6:1
  • dark: text on success 2.5:1
  • dark: text on warning 2.1:1
  • dark: text on info 2.8:1
  • dark: text on brand 2.6:1

Buttons

Badges

Default Secondary Success Warning Destructive

Alerts

Card

Project settings

Every colour on this card comes from the selected preset.
Updated just now

Form

Progress and people

40%
85%
JD
AL
LT

Use it

Choose the preset in settings. This is the one you are previewing:

# settings.py
LIVEVIEW_CONFIG = {
    "theme": {
        "preset": "djust",
        "default_mode": "light",
    },
}

Load the tokens in your base template. Every component, and your own CSS through hsl(var(--primary)), picks them up:

{# base.html #}
{% load theme_tags %}
<head>
  {% theme_head %}
</head>
Read the theming guide ↗Let users switch at runtime ↗Author your own pack ↗Browse every component →