How can I extend the color palette with Sass maps and CSS variables?

Asked on Jul 23, 2025

1 Answer

To extend the color palette in Bootstrap 5 using Sass maps and CSS variables, you can define new colors in your custom Sass file and then compile it. Here's a concise example to illustrate this process.

<!-- BEGIN COPY / PASTE -->
        // _custom.scss

        // Import Bootstrap functions
        @import "node_modules/bootstrap/scss/functions";

        // Define new colors
        $custom-colors: (
            "primary": #3490dc,
            "secondary": #ffed4a,
            "danger": #e3342f
        );

        // Merge with Bootstrap's default theme colors
        $theme-colors: map-merge($theme-colors, $custom-colors);

        // Import Bootstrap to apply changes
        @import "node_modules/bootstrap/scss/bootstrap";
        <!-- END COPY / PASTE -->

Additional Comment:

Start by creating a custom Sass file, for example, `_custom.scss`.
Import Bootstrap's functions to ensure you can use `map-merge`.
Define your custom colors in a Sass map called `$custom-colors`.
Use `map-merge` to combine your custom colors with Bootstrap's default `$theme-colors` map.
Import Bootstrap's main Sass file to apply the changes.
Compile your Sass to CSS to see the changes reflected in your Bootstrap theme.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions