How-toCoreRestyle the whole site in one line.

Use a theme

Goal

You want the whole site to look polished without styling anything by hand.

Before you start

You only need to know how to run an app. A theme is a complete, ready-made look (colors, fonts, spacing, and button styles) applied to every page at once.

The smallest version

Applying a theme takes one line, placed after the imports and before start_server(...):

from drafter import *
from dataclasses import dataclass

set_website_style("terminal")


@dataclass
class State:
    coins: int


@route
def index(state: State) -> Page:
    return Page(state, [
        Header("Coin Collector"),
        "Coins: " + str(state.coins) + "\n",
        Button("Grab a coin", "grab"),
        Button("Spend them all", "spend")
    ])


@route
def grab(state: State) -> Page:
    state.coins = state.coins + 1
    return index(state)


@route
def spend(state: State) -> Page:
    state.coins = 0
    return index(state)


start_server(State(0))

Edit the demo and swap "terminal" for any name below, then run it again.

The theme names

This table lists every valid name, along with the stylesheet each theme is based on:

Name	Based on
`default`	Drafter's own look (what you get without choosing)
`none`	No styling at all: a blank slate for custom CSS
`almond`	Almond.CSS by Alvaro Montoro
`brutal`	Brutal by Vitor Estevam
`daub`	Daub UI Kit by Sliday
`latex`	LaTeX.css by Vincent Doerig
`magick`	magick.css by winterveil
`mvp`	MVP.css by andybrewer
`pico`	Pico CSS
`retro`	retro (markdowncss) by John Otander
`sakura`	Sakura by oxal
`simple`	Simple.css by kevquirk
`skeleton`	Skeleton by Dave Gamache
`tacit`	Tacit by yegor256
`terminal`	Terminal theme by panr
`water`	Water.css (dark) by Kognise
`yorha`	YoRHa CSS by Ethan Chan
`98`	98.css by jdan (a 1998 operating system)
`xp`	XP.css by botoxparty (a 2001 operating system)
`7`	7.css by khang-nd (a 2009 operating system)

See the theme catalog for previews of each one.

Trying themes quickly

While your app is running with the debug panel open, the panel's theme switcher lets you preview themes live without editing code. When you find one you like, write its name into set_website_style(...) to make the choice permanent.

Common problems

The theme did not apply: set_website_style(...) must run before start_server(...). Top of the file, right after imports.
A misspelled name: the error lists every valid theme and suggests the closest match to what you typed.
You want no styling at all: there is a theme for that as well, set_website_style("none").
The theme clashes with your own styling: strong themes style everything. Either accept the theme's choices, pick a quieter theme (simple, sakura, water), or switch to none and add custom CSS.

Understand it

Themes are stylesheets applied over your content, and they never change your state or routes. The tier system is described on Change the appearance.

See another example

The theme catalog previews all twenty, and Finish and test an app picks one for a real project.

Look it up

Site configuration for set_website_style and its relatives.

Fix a problem

A bad theme name produces a friendly error with suggestions. For anything stranger, start at Troubleshooting.