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
    }
}

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

sunset

Warm, inviting design with golden hour color palette

ocean

Calming, fluid design with deep blue and teal tones

metallic

Sleek, modern design with industrial metallic aesthetics

amber

Warm amber and gold -- control room at midnight

aurora

Northern lights -- shifting green-to-violet

bauhaus

Itten's primary triad, Bayer's geometric type, zero decoration

blue

Professional blue -- clean corporate material

catppuccin

Soothing pastel -- elegant dev classic

cyberdeck

Terminal hacker -- matrix green, CRT vibes, monospace everything

cyberpunk

Dystopian neon -- yellow, magenta, cyan, dark atmospheric

default

Neutral zinc -- clean, professional, no personality

djust

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

dracula

Pixel-perfect Dracula -- elegant dev classic

ember

Warm coal and fireplace -- cozy warmth

forest

Deep emerald -- warm earth tones, organic shapes

green

Nature-inspired green -- clean material aesthetic

gruvbox

Retro-warm earthy -- elegant dev classic

high_contrast

Accessibility-first -- bold weight, thick borders, strong depth cues

ink

Sumi ink on washi paper — calligraphic restraint, vermillion seal accent

mono

Pure grayscale -- zero chroma, wide tracking, typographic discipline

natural20

D&D fantasy -- medieval serif, warm shadows, adventure feel

nebula

Space cosmic -- purple-tinted glow, glass surfaces, dark-first

neon_noir

Film noir meets neon -- piercing pink on true black

nord

Cool arctic -- elegant dev classic

ocean_deep

Deep sea -- coastal sky to ocean floor

orange

Energetic orange -- clean material aesthetic

outrun

80s retro racing -- hot pink, purple, sunset glow

paper

Sunlit afternoon reading — cream paper, serif headings, blue-ink links

purple

Creative purple -- clean material aesthetic

rose

Friendly rose -- clean material aesthetic

rose_pine

Elegant muted pastels -- dev classic

shadcn

Shadcn-compatible neutral -- clean material aesthetic

slate

Professional neutral -- no-nonsense, clean, focused

solarized

Scientifically designed -- elegant dev classic

solarpunk

Optimistic nature -- lush greens and warm amber

stripe

Clean fintech — blurple brand, colored shadows, cool precision

synthwave

1980s neon -- glowing pink and cyan, dark atmospheric

tokyo_night

Vibrant neon -- elegant dev classic

linear

Dark-first productivity — purple accent, precise density

notion

Warm minimal workspace — serif headings, generous measure

vercel

Monochrome developer-first — single blue accent, zero shadows

github

Developer-standard Primer design — cool blues, familiar density

art_deco

Gold and midnight navy — geometric elegance, 1920s glamour

handcraft

Warm earth tones — terracotta, sage, mustard, organic shapes, artisan feel

terminal

Green phosphor on black — monospace everything, CRT hacker aesthetic

magazine

Editorial B&W with thin headings, wide tracking, one red accent

swiss

International Typographic Style — Helvetica, strict grid, red+black

candy

Bright pastels, pill shapes, thick borders, bouncy animations

retro_computing

Amber on dark, chunky monospace, pixel aesthetic, hard shadows

medical

Clean clinical — calming blue, generous readability, form-focused

legal

Conservative traditional serif — muted tones, maximum trust

midnight

Ultra-dark purple with glass surfaces and ethereal glows

sunrise

Warm gradient coral to gold — light and airy, optimistic energy

forest_floor

Deep mossy greens, bark browns, dappled-light texture

dashboard

Data-dense, small type, neutral grays, single blue accent

one_dark

Atom's iconic warm dark theme with vibrant syntax colors

monokai

The legendary Sublime Text palette, vibrant on warm dark

ayu

Warm dark with golden accent, the designer's choice

kanagawa

Hokusai's Great Wave — muted Japanese palette with wave blues

everforest

Comfortable green on warm dark, protects your eyes

poimandres

Deep space blueberry — teal and lavender on dark cosmic blue

tailwind

Cool slate and sky blue, the modern utility aesthetic

supabase

Dark emerald developer platform aesthetic

raycast

macOS-native aesthetic — ultra-clean system font, purple accents

adaptive

Royal blue trust with vermillion energy — bold enterprise clarity

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.