UI Component library
Skip to main content
Colours
The Moodle colour scheme:
Moodle colours are slighty different from standard Bootstrap colours. Custom moodle colours are usually defined in a theme preset. For example theme/boost/scss/preset/default.scss
The standard Bootstrap colour scheme:
These colours are used throughout Moodle in text, buttons
Badges
Borders
Customizing moodle colours
Use the $theme-colours Scss array to customize colours in theme/boost/scss/preset/default.scss.
$theme-colors: map-merge((
primary: #1177d1,
secondary: #ced4da,
success: #398439,
info: #5bc0de,
warning: #f0ad4e,
danger: #d43f3a,
light: #f8f9fa,
dark: #373a3c
), $theme-colors);