主题引导以更改表单输入活动颜色答案

【问题标题】：Theming Bootstrap to change form input active color主题引导以更改表单输入活动颜色
【发布时间】：2019-06-03 14:31:25
【问题描述】：

我想使用 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 设置的值，即主题颜色（“primary”）而不是默认的蓝色引导

感谢您的帮助和反馈。

【问题讨论】：

我只是测试你的代码：$spanish_green: #009150; $theme-colors: ("primary": $spanish_green); $component-active-bg: theme-color("primary"); 和 $input-focus-border-color 的值 #12ff95
我会说，这是我所期望的结果，但再次运行它仍然无法正常工作。
如果我重复代码（来自引导程序的 _variables.scss）$component-active-bg: theme-color("primary"); $input-focus-border-color: lighten($component-active-bg, 25%); 不明白为什么我必须重复该代码才能工作。
如果您不想从$theme-colors 添加/删除道具，您可以在“变量文件”中定义自己的$primary 变量。
这是我在基于 Bootstrap github.com/cichy380/html-starter-bs4-webpack/blob/… 的项目中基于 7-1 Sass 架构的 sass 文件结构

标签： twitter-bootstrap

【解决方案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%);
}

【讨论】：