title: Create new color scheme for dark-light mode in bootstrap sass
body: <p>I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:</p>
  <pre><code>$primary:#065FC6;
  $secondary:#263C5C;
  $success:#49C96D;
  $danger:#FD7972;
  $warning:#FF965D;
  $light:#F8F8F8;
  $body-color: #263C5C;
  
  $custom-colors: (
    &quot;brd-default&quot;: $body-color
    );
    
  </code></pre>
  <p>I want create new class like this:</p>
  <pre><code>:root.dark{
      // override colors and classes for dark mode
      $primary:#012345;
      $secondary:#111111;
      $success:#222222;
  }
  </code></pre>
  <p>So how can i copy and paste all bootstrap colors for new color scheme?</p>
  <p>If i can add colors, i will change HTML class so my root(color scheme) will be:</p>
  <p><a href="https://i.stack.imgur.com/s6JXC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/s6JXC.png" alt="enter image description here" /></a></p>
  <p>in my styles.scss:</p>
  <pre><code>@import &quot;./colors&quot;;// custom colors
  @import &quot;bootstrap/scss/functions&quot;;
  @import &quot;bootstrap/scss/variables&quot;;
  @import &quot;bootstrap/scss/utilities&quot;;
  </code></pre>