Как для Bootstrap 4 реализовать переключения тем?

Question

[OstapO]

Есть scss файл с глобальными сменными, где задаются цвета для дарк-темы:

variables.scss

$light-dark:  #304170;
$light-dark-x2: #304170;
$light-info: #52C9FC;
$white: #FFFFFF;
$primary: #16C3AD;
$warning: #FFA543;
$danger: #FA5078;
$info: #3F65FC;
$secondary: #D3D4D6;
$dark: #1D2846;
$nav-links: #E2E2E2;
$btn-fonts-size:  0.875rem;
$text-muted: #CECECE;
$divider-bg: #979797;
$option-btn-border: #7B7B7B;
$modal-title-color: #F2F2F2;
$body-bg: #151F3D;
$collapse-bg: #161E3D;

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "dark": $dark,
  "light-dark": $light-dark,
  "light-dark-x2": $light-dark-x2,
  "warning": $warning,
  "danger": $danger,
  "info": $info,
  "white": $white,
  "light-info": $light-info
);

Не знаю как дополнительно прописать map $theme-colors для лайт-темы. Чтобы эти цвета юзались когда в боди есть соответствующий класс, например:

body.light-theme {
$theme-colors: (
  "primary": $lightTheme-primary,
  "secondary": $lightTheme-secondary,
  "dark": $lightTheme-dark,
  "light-dark": $lightTheme-light-dark,
  "light-dark-x2": $lightTheme-light-dark-x2,
  "warning": $lightTheme-warning,
  "danger": $lightTheme-danger,
  "info": $lightTheme-info,
  "white": $lightTheme-white,
  "light-info": $lightTheme-light-info
);
}

Comments

[WapSter]

Почему не использовать более дружелюбные способы? css переменные и

@media (prefers-color-scheme: dark) {

}

Answer 1

[Leo]

В body делаешь класс, например: .light-theme
Делаешь наследование для этого класса в css
В js меняешь класс в body, например: .dark-theme

Разный мапинг для разных наследований.