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.
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.
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
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
#f66
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
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
CSS
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).
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 |
#ff6666 |
|
| 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 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 color option for less accentuated text (placeholder, helper text, code). Use the bg option to low emphasis a content or display a specific component state (hover, form disabled).
|
Background. |
#eee |
#333 |
|
| Foreground. |
#666 |
#999 |
|
|
Body tertiary - Use the tertiary color and bg options to have a body secondary less-emphasized rendering.
|
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 for the focus outline. Use inner for the focus box-shadow.
|
Outer. |
#000 |
#fff |
|
| Inner. |
#fff |
#000 |
|
|
Link - Use the default color for a link and the hover variant for a link hover state.
|
Default. |
#000 |
#fff |
|
| Hover. |
#f16e00 |
#ff7900 |
|
|
| Code - For code color text. |
#666 |
#999 |
|
|
Sass variables
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 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;