Theming Bootstrap to change form input active color

Question

I would like to change the active color of input components in bootstrap using Sass variables.

I've added my colors to the map theme-colors. But, it seems, that in some cases bootstraps ignores the primary color set in the theme-colors and uses the default blue primary-color

twitter-bootstrap 4.3.1

$spanish_green: #009150';
$theme-colors: (
  "primary": $spanish_green,
  "secondary":  $purple,
  "warning": $yellow,
);

$component-active-bg: theme-color("primary");

//  _variables.scss from node_modules/bootstrap/scss
//$input-focus-border-color: lighten($component-active-bg, 25%) !default;

@debug "Primary color : '#{theme-color("primary")}'."
prints... #009150
@debug "Color of component-active-bg:' #{$component-active-bg:}'."; // prints ...#009150'
@debug "Color of input-focus-border-color:' #{$input-focus-border-color:}'."; 
prints ... #80bdff // the primary bootstrap default color

I expect that variable input-focus-border-color would use the value I've set for $component-active-bg which is the theme-color("primary") instead of the default blue bootstrap

Thanks for your help & feedback.

I just testes your code: $spanish_green: #009150; $theme-colors: ("primary": $spanish_green); $component-active-bg: theme-color("primary"); and $input-focus-border-color has value #12ff95 — Cichy
That, I would say, is the result I would expect but run it again and still not working. — diogui
It works if I repeat the code (of _variables.scss from bootstrap) $component-active-bg: theme-color("primary"); $input-focus-border-color: lighten($component-active-bg, 25%); Don't understand why I've to repeat that code in order to work. — diogui
If you do not want to add/remove props from $theme-colors you can just define your own $primary variable in your "variables file". — Cichy
This is my sass files structure based on 7-1 Sass Architecture in project based on Bootstrap github.com/cichy380/html-starter-bs4-webpack/blob/… — Cichy

botaditya botaditya · Accepted Answer · 2021-06-25T19:17:27

Chrome devtools helped me out.

Just use the following scss:

.form-control:focus {
    color: #212529;
    background-color: #fff;

    //border-color should be set to your primary shade
    border-color:  mat-color($app-primary);
    outline: 0;

    //The rgba of box-shadow should be set to your primary shade
    box-shadow: 0 0 0 0.25rem rgb(235 56 66 / 25%);
}

Theming Bootstrap to change form input active color

1 Answers