title: Bootstrap 4 Add to map - Adding additional theme-color
body: <p>How can add custom new theme color without touching bootstrap variable.scss?</p>
  
  <p>Please note I can update the existing color successfully, but I couldn't add new theme color in that same way  </p>
  
  <p><strong>File structure</strong> </p>
  
  <pre><code>@import 'custom_variables';
  @import './bootstrap/bootstrap'; 
  @import './pages/home';
  </code></pre>
  
  <p><strong>custome_variables.scss</strong></p>
  
  <pre><code>$theme-colors: (
      "primary": #2c67f4, // successfully edited existing color  
      "danger": #ff4136,
      "custom" : "red" // not working when adding new color theme
  );
  </code></pre>
  
  <p><strong>Tried with code but no luck</strong></p>
  
  <pre><code>$theme-colors: map-merge(
    (
      "custom":  "red",
    ),
    $theme-colors
  );
  </code></pre>
  
  <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#add-to-map" rel="nofollow noreferrer">Reference</a></p>