Как использовать несколько тем в Bootstrap с sass

Question

в s css файл:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$primary_color: #EC424F;
.dark {
    $primary_color: #403F45 !global;
}

.light {
    $primary_color: #f4f4f4 !global;
}

$theme-colors: ( "primary": $primary_color);

@import "~bootstrap/scss/bootstrap";

Я пробовал этот способ, но не работает, он просто выбирает последний цвет переменной в последнем классе (желтый) для всех элементов, даже если я добавил световой класс или не

, а в html файле:

<button type="button" class="btn btn-primary btn-lg btn-block">Default</button>
<button type="button" class="btn btn-primary btn-lg btn-block dark">Dark</button>
<button type="button" class="btn btn-primary btn-lg btn-block light">Light</button>

и результат:

я использую angular, кто-нибудь знает, как использовать несколько или переключаемые темы bootstrap с sass?

Answer 1

Вы можете загрузить 3 стиля файла для 3 тем: по умолчанию, темная, светлая - по умолчанию. css - темная. css - светлая. css

Или используйте 1 имя класса для каждой темы на теге тела.

попробуйте: https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7