2

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?

Abdallah El-Rashedy
  • 751
  • 1
  • 10
  • 19

2 Answers2

1

Are you trying to just add new button colors or be able to switch the entire theme entirely?

If you're simply trying to change the styles applied to the classnames used in the html, like btn-primary, you can do that via a map.

$theme-colors: map-merge($theme-colors, $your-custom-theme);

This will override any previous class names and add on new ones.

In order to create multiple themes with SASS, essentially, you're compiling multiple stylesheets that are nested under a theme class name. This is more complex and can be done in a few different ways. The least time consuming and cleanest that I discovered is by importing the bootstrap node module files directly into each theme (so they can be rebuilt with the different variables) and declaring your variables and custom maps first and importing them under the themed class names.
Note: you have to pull in the bootstrap variables manually to do this and remove !default; or the variable names cannot be overridden.

Then, for angular, create a service that gets the id and class names at the root of the project... I put the id and classes in the html tag... and changes the class names dynamically.

Instead of writing a lengthy tutorial, I'm attaching my sandbox so you can see what I mean.

https://codesandbox.io/s/angular-bootstrap5-theming-tkw8j

Click the buttons that say "light theme" and "dark theme"

Ignore the ugly colors... I just picked random ones to show contrast.

user2162298
  • 110
  • 6
  • Can it be done to generate multiple CSS files and switch the files instead of class name ?. This will greatly reduce the output bundled css size as the files are separated and only one theme css file is used (loaded in the browser) at a time. – Anddo Sep 27 '21 at 11:54
0

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

Nguyễn Văn Nam
  • 21
  • 2