Skip to main content


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



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);