UIColour
Didactika's colours next to every colour of Bootstrap and Moodle, read from the version you pick, with their contrast and a lab to try your own.
Plugins never write a colour. They use the classes and variables of Bootstrap and Moodle (btn-primary, text-danger, --bs-primary), and the theme of the site decides what they look like. Every swatch below is read from the stylesheet of the selected Moodle version, shows the best text colour on it with its contrast ratio, and copies its value when you click it.
Colours of the Didactika theme
The teal of the logo (#00555a) and the family the website uses (didactika.org): a teal scale from 50 to 950, with emerald, cyan and a cool slate for neutrals.
Didactika’s palette
Switch on Didactika theme in the bar at the top and every example of the site, including the swatches below, is drawn with the palette of the theme applied to the Bootstrap roles: primary #0f766e, secondary #475569, success #15803d, info #0369a1, warning #b45309 and danger #b91c1c. See the page “Didactika theme” for what else the theme changes. Each reaches AA (4.5:1) with white text.
Theme colours of this version
The eight colours of Bootstrap’s theme.
They are --bs-* variables and follow the colour mode of the page.
They are the variables of the root (--primary, --success…).
Text, backgrounds and borders 5.3+
Subtle and emphasis tones 5.3+
Soft backgrounds, borders and strong text for each role, used by alerts and list items.
Bootstrap palette
The ten hues of Bootstrap, black and white.
Each hue also has its scale from 100 to 900, computed the way Bootstrap does: a tint mixes with white and a shade with black.
Grays
Moodle scales 5.3+
Moodle adds a design token set of its own (--mds-color-<hue>-<step>). Use a scale colour only where a theme colour does not fit, for example the colour of a type of activity.
What each colour means
| Colour | Means | Examples |
|---|---|---|
| Primary | The main action, what is chosen or open | New profile, Save, the active page |
| Secondary | A neutral action or state | Cancel, Import, Draft |
| Success | Done, enabled, safe | Completed, Enabled |
| Warning | Needs attention, overwrites, partial | Partial, Overwrite |
| Danger | Removes, stops or failed | Delete, Stop, Failed |
| Info | Neutral information that matters | Queued, Running |
The meaning is the same in every plugin. Red is never decoration, and green is never “primary”.
Contrast
Text on a colour must reach 4.5:1 (3:1 from 24 px or 19 px bold), and the borders of controls and focus rings 3:1, in every colour mode. The badge on each swatch shows the best text colour and its ratio. Do not tell two states apart by hue alone: pair colour with an icon or a word, and use blue and orange before red and green.
Tints
Where a plugin needs a soft background in a theme colour (a badge, a row action, a tile), it mixes the colour with the page background instead of choosing a new colour: color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg)). The tint follows the theme and the colour mode, and nothing about it has to be configured.
Colour lab
Change a role and see it on real components of the selected version, with the contrast of the text on it. Nothing outside the preview changes. Copy the SCSS for a Boost preset when it looks right.
A sentence with a link · text-primary · text-danger
- Active item
- Another item
SCSS for a Boost preset
Paste it in the "Raw initial SCSS" of the theme, or use the primary in "Brand colour".
CSS variables
For Moodle 5.x and its extra CSS. The buttons need the SCSS above, because Bootstrap compiles their colours.