title: How to use multiple theme in Bootstrap with sass
body: <p>in scss file:</p>
  
  <pre><code>@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";
  </code></pre>
  
  <p>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 </p>
  
  <p>and in html file: </p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary btn-lg btn-block"&gt;Default&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-block dark"&gt;Dark&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-block light"&gt;Light&lt;/button&gt;
  </code></pre>
  
  <p>and the result:<a href="https://i.stack.imgur.com/OXxmE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OXxmE.png" alt="enter image description here"></a></p>
  
  <p>i'm using angular, anyone know how to use multiple or switchable bootstrap themes with sass? </p>