Colors

How do I add brand (client) colors and get Boostrap to use some of them?

Quick Overview

Initially it is good to have a definition of all on-brand (client) colors that will be used (or could be needed). Then, where it makes sense, you would replace the default theme colors (e.g. $accu--blue: $brand--blue;). Next you could apply some of these brand colors so that Bootstrap uses them for common/key color values throughout the site (e.g. $primary: $brand--blue;). This would permeate Bootstrap so that all the "*-primary" classes (e.g. bg-primary, alert-primary, etc.) would now be using the on-brand blue that you've defined.

Temporary example of a simple Intranet with on-brand colors. src/styles/theme/_variables.scss

• Brand colors defined at Line 84+
• Bootstrap base $colors at line 98+
• Bootstrap $theme-colors (primary, secondary, light, and dark) applied at lines 374+