{% 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 brand_colors %}

Brand colors

Each emits --color-<name>, a -contrast foreground, an -rgb companion (solids), and a 50→950 shade scale. Shown for {{ preview_mode|default:'light' }} mode.

{% for c in brand_colors %}
Aa {{ c.name }} {{ c.css_var_name }}
{% if c.shades %}
{% for s in c.shades %}
{{ s.key }}
{% endfor %}
{% else %}

Gradient — no shade scale or -rgb companion.

{% endif %}
{% endfor %}
{% endif %}

Semantic colors

Success
Warning
Error
Info
Link
Focus ring
{% if contrast_report %}

Accessibility — contrast

WCAG 2.1 contrast ratios for key text pairs in {{ preview_mode|default:'light' }} mode. Normal text should reach AA (4.5:1); AAA is 7:1.

{% for c in contrast_report %}
Aa {{ c.label }} {% if c.ratio %}{{ c.ratio }}:1{% else %}—{% endif %} {% if c.grade == 'AAA' %}AAA {% elif c.grade == 'AA' %}AA {% elif c.grade == 'Fail' %}Fail {% else %}n/a{% endif %}
{% endfor %}
{% endif %}

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.

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