Question

我想使用Sass变量来更改引导程序中输入组件的活动颜色。

我已经将颜色添加到地图主题颜色中。但是，似乎在某些情况下，引导程序会忽略主题颜色中设置的原色，并使用默认的蓝色原色

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

我希望变量input-focus-border-color将使用我为$ component-active-bg设置的值，它是theme-color（“ primary”）而不是默认的蓝色引导程序

感谢您的帮助和反馈。

Answer 1

Chrome 开发者工具帮了我大忙。

只需使用以下 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%);
}

设置Bootstrap主题以更改表单输入的活动颜色

1 个答案: