Как правильно изменить цвета темы в Bootstrap 4?

Question

[Дмитрий Дев]

В инструкции прописано, что поменять цвет темы можно через

$theme-colors: (
  "primary": #fdff5b,
  "secondary": #e6535a,
);

и btn-primary соответственно становятся цветом #fdff5b

Но как изменить цвет активной кнопки или кнопки при наведении :hover ?
Как это делать правильно, чтобы не перебивать своими классами?

Answer 1

[eternalfire]

для кнопок возможно попробовать так - в sass исходниках переопределить файл /scss/mixins/_buttons.scss

@mixin button-variant(
  $background,
  $border,
  $change,
  $btn-hover-change-bg,
  $btn-hover-change-border,
  $btn-active-change-bg,
  $btn-active-change-border) {
    @if $change == "darken" {
      $hover-bg:     darken($background, $btn-hover-change-bg);
      $hover-border: darken($border, $btn-hover-change-border);
      $active-bg:    darken($background, $btn-active-change-bg);
      $active-bg:    darken($border, $btn-active-change-border);
    } else {
      $hover-bg:     lighten($background, $btn-hover-change-bg);
      $hover-border: lighten($border, $btn-hover-change-border);
      $active-bg:    lighten($background, $btn-active-change-bg);
      $active-bg:    lighten($border, $btn-active-change-border);
    }
    
    ...

  }
}

как раз переменные $hover-bg, $active-bg

Comments

[Дмитрий Дев]

А чтобы через свой custom.scss? Чтобы потом после обновы, не пришлось опять исходники менять.

[eternalfire]

dikey58, так естественно это переопределение нужно сделать в своём файле

[Дмитрий Дев]

eternalfire, хорошо, попробую. А еще вопрос. А если через CDN подгружаешь bootstrap 4, каким универсальным способом можно поменять цвета эти?

[eternalfire]

dikey58, самому написать, я так просто переназначаю классы бутстраповские, для того и название стилей - каскадные - если свои после подключены, они в приоритете

пример для кнопки

.btn-primary {
  background-color: #a4b0be;
  border-color: #a4b0be; }

.btn-primary:hover {
  background-color: #57606f;
  border-color: #57606f; }

.btn-primary.focus, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(87, 96, 111, 0.25); }

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(87, 96, 111, 0.25); }

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: #57606f;
  border-color: #57606f; }

[Дмитрий Дев]

eternalfire, раз в приоритете, то переопределять только через !important, если после подключены?

[Дмитрий Дев]

а что меняет эта переменная $component-active-bg ?