How to use multiple theme in Bootstrap with sass

0
votes

in scss file:

@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";

i tried this way but not works it's just chooses the last variable color in the last class (yellow) for all elements even i added the light class or not

and in html file: 

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

and the result:enter image description here

i'm using angular, anyone know how to use multiple or switchable bootstrap themes with sass?

1
angularbootstrap-4sassangular-ui-bootstrapscss-lint

1 Answers

-1
votes

You can load 3 file style for 3 themes: default, dark, light - default.css - dark.css - light.css

Or use 1 class name for each theme at body tag.

try it: https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7