How to implement theme switching for Bootstrap 4?

Question

Sass

There is a scss file with global changeables, where the colors for the dark theme are set:

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
);

I don't know how to additionally write map $theme-colors for a light theme. So that these colors are used when there is a corresponding class in the body, for example:

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
);
}

Answer 1

In body you make a class, for example: .light-theme
You make inheritance for this class in css
In js you change the class in body, for example: .dark-theme
Different mapping for different inheritances.