CODEWITHSUNDEEP
twitter-bootstrap
diogui
diogui

Reputation: 85

Theming Bootstrap to change form input active color

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.

Upvotes: 1

Views: 1717

Answers (1)

botaditya
botaditya

Reputation: 31

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%);
}

Upvotes: 2

Related Questions