{% load wagtail_themes %} {{ theme.name }} — preview {% theme_css theme=theme %}

wagtail-themes preview

{{ theme.name }}

Mode: {{ preview_mode|default:'light' }} · Default: {{ theme.default_mode }}

Surface colors

Background--color-bg
Surface--color-surface
Text primary--color-text-primary
Text secondary--color-text-secondary
Text muted--color-text-muted
Border--color-border
{% if theme.brand_colors.all %}

Brand colors

{% for c in theme.brand_colors.all %}
{{ c.name }} {{ c.css_var_name }}
{% endfor %}
{% endif %}

Semantic colors

Success
Warning
Error
Info
Link
Focus ring

Typography

Heading 1 — the quick brown fox

Heading 2 — sphinx of black quartz

Heading 3 — judge my vow

Body copy demonstrates weight and style. A link.

Secondary body text.

Border radii

Shadows

--shadow-sm
--shadow-md
--shadow-lg

Buttons

Alerts

Success — this is a success alert.
Warning — this is a warning alert.
Error — this is an error alert.
Info — this is an info alert.
{% if theme.brand_colors.all %}

Brand color shades (50 → 950)

Each BrandColor auto-emits a Tailwind-aligned scale derived from its base hex.

{% for c in theme.brand_colors.all %}

{{ c.name }} · --color-{{ c.slug }}-50 through -950

{% for shade in shade_keys %}
{{ shade }}
{% endfor %}
{% endfor %}
{% endif %}

Typography scale

xs — Extra small (--font-size-xs)
sm — Small (--font-size-sm)
base — Body text (--font-size-base)
lg — Lead (--font-size-lg)
xl — Subhead
2xl — Heading 3
3xl — Heading 2
4xl — Display

Spacing scale

--space-0 through --space-24 (Tailwind-aligned).

{% for tok in spacing_keys %}
{{ tok }}
{% endfor %}

Borders, leading & tracking

--border-1
--border-2
--border-4
--border-8

Leading tight — example body text laid out with --leading-tight. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

Leading normal — example body text with the default --leading-normal. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

Leading relaxed — example body text with --leading-relaxed. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

tracking-tight
tracking-normal
tracking-wide

Transitions