Colours & buttons
Backgrounds, text, links, buttons, and brand colours for light and dark mode.
General
Background and border colour, button radius. Each colour field has a **dark mode** row directly under it (dmcolor*). Use the **dark mode** switch in the admin top bar to show those rows and match the preview to data-bs-theme="dark". While the preview is dark, edits to the dark rows update the page **live** (same behaviour as sidebar drawer colours).
Body Background Color
Enter a short value such as a label, link, or colour code.
theme_xy/colorbodybgBody Background Color
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorbodybgBorder Color (Global)
Enter a short value such as a label, link, or colour code.
theme_xy/colorborderBorder Color (Global)
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorborderButton Border Radius (px)
All roundedness will be generated automatically by SCSS. If you want to change the roules just use code below to: Advanced settings – Raw initial SCSS $btn-border-radius: 5px !default; $btn-border-radius-lg: $btn-border-radius * 12 !default; $btn-border-radius-lg: $btn-border-radius * 8 !default; $btn-border-radius-md: $btn-border-radius – 2px !default; $btn-border-radius-sm: $btn-border-radius – 3px !default;
theme_xy/btnborderradiusSolid button backgrounds
Optional hex (or CSS colour) for **.btn-primary**, **.btn-secondary**, **.btn-success**, **.btn-info**, **.btn-danger**, **.btn-warning**, **.btn-light**, and **.btn-dark**. Leave empty to keep the theme defaults. When only the solid background is set, label text and hover/active states are derived automatically for contrast; you can optionally override **label text**, **text on hover**, and **background on hover** (light and dark mode) per variant. Each variant has a **Sample** button that tracks the colour fields while you type (save the form to publish site-wide).
Text Colors Not recommended to change
Compatible with WCAG Principles. Change only when you really need to.
Text Color
Enter a short value such as a label, link, or colour code.
theme_xy/colorbodyText Color
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorbodyText Color (Secondary)
Enter a short value such as a label, link, or colour code.
theme_xy/colorbodysecondaryText Color (Secondary)
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorbodysecondaryText Color (Tertiary)
Enter a short value such as a label, link, or colour code.
theme_xy/colorbodytertiaryText Color (Tertiary)
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorbodytertiaryHeadings
Enter a short value such as a label, link, or colour code.
theme_xy/colorheadingsHeadings
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorheadingsLink Color
Enter a short value such as a label, link, or colour code.
theme_xy/colorlinkLink Color
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorlinkLink Color (Hover)
Enter a short value such as a label, link, or colour code.
theme_xy/colorlinkhoverLink Color (Hover)
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorlinkhoverPrimary colors
Primary buttons, top bar, all important/primary UI elements.
Primary 600 – Main Theme Color
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary600Primary 600 – Main Theme Color
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary600Primary 100
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary100Primary 100
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary100Primary 200
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary200Primary 200
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary200Primary 300
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary300Primary 300
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary300Primary 400
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary400Primary 400
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary400Primary 500
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary500Primary 500
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary500Primary 700
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary700Primary 700
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary700Primary 800
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary800Primary 800
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary800Primary 900
Enter a short value such as a label, link, or colour code.
theme_xy/colorprimary900Primary 900
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorprimary900Grays Not recommended to change
I used gray shades compatible with WCAG Principles. Change only when you really need to.
Gray 100
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray100Gray 100
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray100Gray 200
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray200Gray 200
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray200Gray 300 e.g main borders color
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray300Gray 300 e.g main borders color
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray300Gray 400
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray400Gray 400
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray400Gray 500
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray500Gray 500
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray500Gray 600
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray600Gray 600
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray600Gray 700
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray700Gray 700
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray700Gray 800
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray800Gray 800
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray800Gray 900
Enter a short value such as a label, link, or colour code.
theme_xy/colorgray900Gray 900
Enter a short value such as a label, link, or colour code.
theme_xy/dmcolorgray900