Как переопределить все цвета в bootstrap 4?

Question

Я потратил время на изучение темы bootstrap с помощью SASS. Шаги были следующие:

• В моем каталоге проекта в командной строке запускается npm install bootstrap --save
• Затем я записал в main.s css файл с помощью

$theme-colors: (
  "primary": #9b2335,
  "secondary": #696969,
  "success": #d9596c,
  "info": #d02f47,
  "warning": #e38291,
  "danger":#de6e7e,
  "light": #d9d9d9,
  "dark": #333333
);

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

• В командной строке запускается sass main.scss main.css

И при этом я ожидаю, что ВСЕ цвета темы будут перезаписаны. Обратите внимание, что все мои пользовательские переменные $theme-color имеют оттенок красного или серого семейства. Ничто в этих цветовых значениях не синее. Тем не менее, граница вокруг моей кнопки-переключателя навигационной панели синего цвета, когда она сфокусирована (см. Pi c). Почему он не изменился на один из моих собственных цветов темы? Я просматривал _variables.s css, но ничего очевидного не выскочило на меня.

html для моей страницы было скопировано из примера альбома bootstrap, но важная часть, которую я думаю, состоит в следующем:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Что я пропустил здесь, чтобы переопределить ВСЕ цвета?

Answer 1

это по умолчанию bootstrap цвет фокуса из ("_reboot.s css"):

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

, если вы хотите установить цвет из вашей темы, вы должны переопределить его. например:

button:focus {
  outline: 5px auto map-get($theme-colors, "primary");
}