Unable to override $theme-color in bootstrap

Question

It's bootstrap 4.0 with SASS

My style.scss file contains the following code:

@import "../bootstrap/scss/bootstrap";

@import "colors";
@import "main";

and _colors.scss file contains the following code:

$bg-white : white;

$theme-colors: (
        primary: #333333
)

You can see that I am just trying to override the $theme-color('primary') but the problem is this that it does nothing.

And If I shift @import "colors" in the start of the file style.scss It gives me following error:

error ../bootstrap/scss/_forms.scss (Line 284: $color: null is not a color for `rgba')

Actually, the style.scss file compiles to style.css file and that one is linked file.

Question: How I can override the $theme-color in bootstrap-4 when using SASS?

Any help will be appreciated, and Thanks in advance

Cheers.

Mitrewort

good question , same problem also may be named like: Argument $color of darken($color, $amount) must be a color – Powel

Answer 1

Update 2021 for Bootstrap 5

Per the guidance in the docs...

"Variable overrides must come after our functions are imported, but before the rest of the imports."

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

---

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

Demo: https://www.codeply.com/go/lobGxGgfZE

---

Also see this answer

Gillyflower

I have try this with latest v4.1.2. but, I get error this Error: File to import not found or unreadable: utilities/screenreaders. how can i resolved? Thanks. – Jeffries

@Jeffries Instead of importing functions and variables, do that @import "~bootstrap/scss/bootstrap-reboot"; – Night

@MichaelCzechowski - that works too but it also adds mixins which is unnecessary for theme-colors customization. – Gillyflower

It is bit a shame, that bootstrap does not provide a simple guideline for implementing customizations. @Zim you're right. Now I changed my method. – Night

I believe you need to remove the semi-colon after #333333. Throws an error for me. – Expiable

Starting in bootstrap 5.2, there is a _map.scss which needs to be imported after defining new variables. $theme-colors-rgb and $utilities-text are defined in this _map.scss – Gader

The docs implied that assigning the $theme-colors variable would override the defaults. Had to assign each color top-level. – Dictation

Answer 2

This got me too. You need to import functions.scss into your scss file before variables.

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Your paths may differ.

This is with Bootstrap 4 Beta 1.

Smack

This is the answer I was finding out for myself as well. Without the functions above variables, it does not compile theme-color("primary") correctly because there's a function called theme-color inside of functions. – Gaudette

Confirmed doesn't seem to work at the moment. In fact when I try this it still throws the error. – Norther

Answer 3

None of the solutions provided work. Some are close and will update the color use on most elements, but not all elements. I have tried them all (and every other alternative I can find on StackOverflow and other websites, but those solutions only affect the elements that are specifically referencing the color property and does not update those using the theme-color function to get the color.

The expected solution (and recommended by others) is

/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
  primary: #004C9E
);

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

But this leaves 15 occurences of #007bff (the normal blue/primary color) throughout the generated custom.css. Examples of it occur in the pagination section, e.g.

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

By setting both the $colors and the $theme-colors custom properties after the import of the functions.scss, and placing the statement to import the variables.scss AFTER these changes appears to set the new colors throughout. I presume that by setting these variables specifically, the bootstrap variables cannot override them.

@import "../../node_modules/bootstrap/scss/functions";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary color to AAA standards */
$theme-colors: (
  primary: #004C9E
);

@import "../../node_modules/bootstrap/scss/variables";

/* put other customization in here */

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

The may not seem right, but it does appear to work. I'm not a SASS expert, so maybe someone else could explain this better. I hope this helps anyone who may still be struggling to solve this issue.

Etesian

Answer 4

I'm assuming that you have installed Bootstrap 4 beta using npm and you wish to customize the Bootstrap SCSS without modifying the source in node_modules.

The way I do it is by overriding the Bootstrap variables contained in variables.scss:

app-styles.scss

// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';

// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';

variables.scss

$theme-colors: (
    primary: $trump-hair,
    secondary: $gandalf-hat,
    success: $my-favorite-color,
    info: #FBC02D,
    warning: #FF5722,
    danger: $color-of-melena,
    light: #1B5E20,
    dark: $bile-green
);

The way to override bootstrap theme colors is actually due to be changed in the upcoming beta 2. The current requirement is that you have to include the entire theme-colors Sass map when overriding. In the current beta, failure to include the entire Sass map will result in:

Argument $color of darken($color, $amount) must be a color

Please see this Github issue and this Codepen for more information, and an example of how you will be able to override theme colors in beta 2.

Ulotrichous

What's the correct way of getting those values? I see theme-colors('blue') in the bootstrap scss files, but I'm getting errors.. – Tanah

Its just a Sass Map: map-get($theme-colors, primary) – Ulotrichous

Answer 5

For me, it was maps. In Bootstrap 5.3, if you have imported maps, then the overridden color will not work.

Remove this.

@import '../lib/bootstrap/scss/maps';

If you require maps for Bootstrap Utilities API, you need to create a new .scss file and include utilities changes.

Mayweed