The theme offers 11 additional colour schemes (15 in total including the default green):

• Green: #55A79A
• Red: #EF4444
• Purple: #b771b0
• Orange: #e67e22
• Blue: #0d6efd
• Pink: #c71c77
• Brown: #91633c
• Slate: #5D6D7E
• Olive: #808000
• Teal: #008080
• Charcoal: #34495e

You can test the colour schemes per page using the style switcher in the bottom left corner:

Changing The Theme Primary Colour

The style switcher is just for testing but if you want to change permanently to one of the predefined colours or a custom colour you have the following options:

1) In Config

The simplest option is to use your config.PROJECT.js file and set the setting colourScheme: 'COLOUR', with COLOUR being one of the colours listed above ie. colourScheme: 'purple',. This option alters the themes CSS variables to switch the colour.

---

2) In SASS

Only slightly more complex, you can change the theme colour to any colour even outside the predefined colours by using your /src/scss/_variables.custom.scss file and setting $primary: HEX_COLOUR; ie. $primary: #343566;.

This will update the $primary variable throughout Bootstrap and AppStrap Docs and run all the colour functions again so is a more “complete” way of changing your primary colour.