Color theme
Boosted is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
On this page
ThemingLink to this section: Theming
We use a subset of the full color palette to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss
file.
This smaller color palette is used to generate our components variants and our color-related utilities and helpers.
All these colors are available as a Sass map, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Check out our Sass maps and loops docs for how to modify these colors.
However, other colors are needed to create an interface. The following sections explain which colors are used for which purpose in a light and dark mode context.
The following color sections represent the only colors you should have inside an Orange interface either in contextual light or dark theme. The following bicolor representation shows the rendering of the same usage on light or dark theme.
The corresponding values displayed in these sections are used within the framework to create our components and utilities. But they are rarely used and to be used directly in a project. We recommend using the usable variables instead that are more specific.
CoreLink to this section: Core
The Boosted core colors should always dominate other colors inside a page. They are used to highlight elements, figures, texts or actions.
#f16e00
#ff7900
#000
#fff
#fff
#141414
FunctionalLink to this section: Functional
The Boosted functional colors are associated to specific established meanings (respectively success, info or discovery, warning or alert, critical or error) and should be used in combination with a meaningful icon.
Please note that the functional colors are not meant to be used as backgrounds or colors.
#228722
#6c6
#4170d8
#69f
#fc0
#fc0
#cd3c14
#ff4d4d
GraysLink to this section: Grays
The Boosted grays are used as backgrounds, colors or borders to highlight some elements or actions (hover state, disabled state, supporting texts, dividers, low highlights). They should not dominate the page.
#eee
#333
#ddd
#666
#ccc
#666
#666
#999
SupportingLink to this section: Supporting
The Boosted supporting colors are meant for backgrounds, data display or illustrations. As you may have noticed, they don’t change their color depending on the theme. They should not dominate the page.
#4bb4e6
#4bb4e6
#ffd200
#ffd200
#50be87
#50be87
#a885d8
#a885d8
#ffb4e6
#ffb4e6
#ff7900
#ff7900
CSSLink to this section: CSS
VariablesLink to this section: Variables
Added in v5.3.0
Colors ending in -rgb
provide the red, green, blue
values for use in rgb()
and rgba()
color modes. For example, rgba(var(--bs-secondary-rgb), .5)
.
ThemingLink to this section: Theming
The following CSS variables are the custom properties built from our theming Sass map and are used to create our usable variables.
Please note that only the functional colors are meant to be used directly in a project.
Description | Light value | Dark value | Variables |
---|---|---|---|
Primary — Main theme color, used for high emphasis and active component. | #f16e00 | #ff7900 | |
Secondary — Secondary theme color, used for emphasized buttons, focus states, and more. | #000 | #fff | |
Success — Theme color used for positive or successful actions. | #228722 | #66cc66 | |
Danger — Theme color used for errors or dangerous actions. | #cd3c14 | #ff4d4d | |
Warning — Theme color used for non-destructive warning messages. | #ffcc00 | #ffcc00 | |
Info — Theme color used for neutral or informative content. | #4170d8 | #6699ff | |
Light — Additional theme option. | #ccc | #ccc | |
Dark — Additional theme option. | #000 | #000 |
Usable variablesLink to this section: Usable variables
Some more contextual CSS variables are provided to create high-level semantic variables for your project that are linked to reusable basic concepts such as disabled, hover, focus, active, etc.
They are meant to be used directly in a project and will ease its maintenance, especially after a Boosted update.
Description | Light value | Dark value | Variables | |
---|---|---|---|---|
Body - Default background and foreground colors, including components. | Background. | #fff | #141414 | |
Foreground. | #000 | #fff | ||
Body secondary - Use the | Background. | #eee | #333 | |
Foreground. | #666 | #999 | ||
Body tertiary - Use the tertiary | Background. | #fafafa | #000 | |
Foreground. | #ccc | #999 | ||
*Emphasis - For higher contrast text. Not applicable for backgrounds. | #000 | #fff | ||
Border - Use the default border for clickable component borders and the subtle variant for everything else. | Default. | #000 | #fff | |
Subtle. | #ccc | #666 | ||
**Disabled - For disabled state. | #ccc | #666 | ||
*Highlight - Use to highlight some components. | Background. | #000 | #fff | |
Foreground. | #fff | #000 | ||
Tertiary active - Use for active components often accompanied to an orange active bar. | Background. | #ddd | #666 | |
Focus visible - Use | Outer. | #000 | #fff | |
Inner. | #fff | #000 | ||
Link - Use the default | Default. | #000 | #fff | |
Hover. | #f16e00 | #ff7900 | ||
Code - For code color text. | #666 | #999 |
Sass variablesLink to this section: Sass variables
Boosted variablesLink to this section: Boosted variables
Our functional and supporting colors are defined for light and dark modes.
//// Functional colors
$functional-green: $ods-forest-200;
$functional-blue: $ods-water-200;
$functional-yellow: $ods-sun-100;
$functional-red: $ods-fire-200;
//// Supporting colors
$supporting-blue: $ods-blue-300;
$supporting-yellow: $ods-yellow-300;
$supporting-green: $ods-green-300;
$supporting-purple: $ods-purple-300;
$supporting-pink: $ods-pink-300;
$supporting-orange: $ods-orange-100;
$functional-green-dark: $ods-forest-100;
$functional-blue-dark: $ods-water-100;
$functional-yellow-dark: $functional-yellow;
$functional-red-dark: $ods-fire-100;
Bootstrap variablesLink to this section: Bootstrap variables
Our Boosted variables are mapped to Bootstrap’s basic color variables.
$blue: $functional-blue;
$indigo: $supporting-purple;
$purple: $supporting-purple;
$pink: $supporting-pink;
$red: $functional-red;
$orange: $ods-orange-200;
$yellow: $functional-yellow;
$green: $functional-green;
$teal: $supporting-green;
$cyan: $supporting-blue;
Then, these basic color variables are used to define the theme colors. They are used to create our CSS theming variables.
$primary: $orange;
$secondary: $black;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $gray-500;
$dark: $black;
$primary-dark: $supporting-orange;
$secondary-dark: $white;
$success-dark: $functional-green-dark;
$info-dark: $functional-blue-dark;
$warning-dark: $functional-yellow-dark;
$danger-dark: $functional-red-dark;
$light-dark: $gray-500;
$dark-dark: $black;