Skip to content
Customization

Make It Yours

Four levels of customization — from swapping a preset in one line to building a fully custom theme package.

Level 1

Switch Preset & Design System

The fastest customization. Pick any of the 19 color presets and 11 design systems in settings.py. No CSS required.

settings.py 
LIVEVIEW_CONFIG = {
    'theme': {
        # Pick any color preset
        'preset': 'blue',  # default | blue | green | purple | rose | cyberpunk | ...

        # Pick any design system
        'design_system': 'minimalist',  # material | ios | fluent | retro | playful | ...

        # Light/dark/system mode default
        'default_mode': 'system',
    }
}

Color presets

Each preset defines a full set of semantic HSL tokens for both light and dark mode.

  • default — neutral zinc palette
  • blue / green / purple / rose — vivid system colors
  • cyberpunk / retro / synthwave — themed palettes
  • catppuccin / rose-pine / nord — popular community presets

Design systems

Each design system defines typography, spacing, shadows, radius, and animation personality.

  • material — Google Material 3 feel
  • minimalist — clean, low-decoration
  • neo-brutalist — flat, high-contrast, bold
  • playful / elegant / retro — personality-first

See all combinations live → Themes

Level 2

Use a Theme Pack

A theme pack bundles a design system + color preset into a single opinionated aesthetic. One setting changes everything: border radius, shadows, fonts, spacing, animations, component style.

settings.py 
LIVEVIEW_CONFIG = {
    'theme': {
        'pack': 'brutalist',  # flat corners, hard shadows, bold headings
        # pack overrides preset + design_system
    }
}
djust

djust.org brand — dark, professional, with rust orange accents

corporate

Clean, professional design for business applications

playful

Fun, energetic design with personality

retro

Classic 90s web aesthetic with pixel-perfect design

elegant

Sophisticated, premium design with refined details

brutalist

Bold, dramatic design with high contrast

nature

Soft, natural design inspired by organic forms

cyberpunk

Futuristic interface with neon highlights and dark aesthetics

sunset

Warm, inviting design with golden hour color palette

forest

Natural, earthy design inspired by woodland environments

ocean

Calming, fluid design with deep blue and teal tones

metallic

Sleek, modern design with industrial metallic aesthetics

Browse all packs → Theme Packs

Level 3

Override CSS Tokens

Add your own custom.css with CSS custom property overrides. These layer on top of any preset or pack — override only what you need.

custom.css 
/* Override the preset's primary color */
:root {
    --primary: 240 90% 55%;           /* HSL — no hsl() wrapper */
    --primary-foreground: 0 0% 100%;
    --radius: 0.5rem;                 /* border radius */
    --font-heading: 'Georgia', serif;  /* heading font */
}

/* Scope overrides to a specific section */
.marketing-section {
    --primary: 16 90% 50%;            /* orange accent in this zone */
}

/* Component-level overrides via --dj-* variables */
.tight-form {
    --dj-input-radius: 0;            /* square inputs in this form */
    --dj-button-radius: 0;
}

Common tokens

Token Description
--primary Main brand color (HSL)
--accent Secondary brand color
--radius Base border radius (rem/px/0)
--font-heading Heading font stack
--background Page background

Load order matters

Load your custom CSS after {% theme_head %} so overrides win: 

<head>
  {% theme_head %}         <!-- 1st -->
  <link href="components.css"> <!-- 2nd -->
  <link href="custom.css">     <!-- 3rd -->
</head>

Use the Live Editor to explore token values and export a starting tokens.css.

Level 4

Create a Custom Theme

For full control — custom component templates, fonts, and publishable packages — scaffold a theme with the management command:

terminal 
$ python manage.py djust_theme create-theme my-brand \
    --preset blue \
    --design-system minimalist

# Scaffold a pip-installable package instead:
$ python manage.py djust_theme create-package my-brand \
    --author "Acme Corp" \
    --preset blue

This creates themes/my-brand/ with tokens.css, component overrides, and a theme.toml manifest. Validate your theme before publishing:

terminal 
$ python manage.py djust_theme validate-theme my-brand
$ python manage.py djust_theme check-compat my-brand
Getting Started

Install, configure, and use your first component in 5 minutes.
Integration Guide

How djust-theming and djust-components work together at the architecture level.
Component Gallery

Every component, every variant, live. The fastest way to explore what's possible.