{% 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.