Can Not Use Theme Color with Text or Bg

Can not use theme color with text or bg

I recently answered a similar question, but there does seem to be a new issue introduced in 5.1.0 because of this change mentioned on the Bootstrap blog...

"Updated .bg- and .text- utilities
Our new RGB values are built to help us make better use of CSS variables across the entire project. To start, our background-color and color utilities have been updated to use these new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color."

Currently in 5.1.0 you'd need to rebuild all the bg-* and text-* classes like this...

@import "functions";
@import "variables";
@import "mixins";

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Demo

Update for Bootstrap 5.1.x -- the issue with custom bg- and text- colors will be fixed in 5.2.x per: https://github.com/twbs/bootstrap/issues/35297

Bootstrap 5 - Custom theme-colors not updating classes

Bootstrap 5.1.0

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

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

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Bootstrap 5.0.2

You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc...

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

Demo

Bootstrap 5 won't allow me to add additional colors to the map

I'm not sure what you have in _custom, but the $custom-colors map you've created should work fine to generate the additional colors.

First import functions and variables, merge the $custom-colors map with $theme-colors, finally @import bootstrap (you can import the entire thing, or separate modules as you have done):

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "../../../node_modules/bootstrap";

SASS demo

Another important thing to note is that in 5.1.x, you need to do more as explained here in order to generate custom text- and bg- classes. Also see issue: https://github.com/twbs/bootstrap/issues/35297

Why the dark-theme colors written in the SCSS file does not apply?

Inside your dark mode toggle function, you need to toggle the class dark on the body element. Also, in your markup, you cannot omit the body tag, it's mandatory and also, aside from head, the only child element allowed in <html>:

$('.dark-toggle').on('click',function(){
    // OTHER STUFF
    document.body.classList.toggle('dark');
});

// SIDENAV
$(document).ready(function() {
  // SWAP ICON ON CLICK
  // Source: https://stackoverflow.com/a/34254979/751570
  $('.dark-toggle').on('click', function() {
    if ($(this).find('i').text() == 'brightness_4') {
      $(this).find('i').text('brightness_high');
    } else {
      $(this).find('i').text('brightness_4');
    }
    document.body.classList.toggle('dark');
  });

});

/* and this is the dark_mode.scss file, compiled to css */

body {
  background-color: #eee;
  transition: color 1s ease, background-color 1s ease;
}

body.dark {
  background-color: #202123;
  color: #fff;
}

body.dark nav {
  background-color: #26A69A;
}

body.dark .card {
  background-color: rgba(255, 255, 255, 0.2);
}

body.dark .btn {
  background-color: #EE6F73;
}

body.dark .divider {
  opacity: 0.2;
}

body.dark .sidenav {
  background-color: #2D2D31;
}

body.dark .sidenav li a:not(.subheader) {
  color: #89B2F5;
}

body.dark .sidenav li a:not(.subheader):hover {
  background-color: #3B4043;
}

body.dark .sidenav li a.subheader {
  color: #9AA0A6;
}

body.dark .sidenav li a .material-icons {
  color: #9AA0A6;
}

body.dark .collection {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection .collection-item {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
</head>

<body class="light">
  <div class="row">
    <div class="col s12">
      <a class="btn dark-toggle" href="#" title="Dark/light"><i class="material-icons left">brightness_4</i> Toggle Dark Mode</a>
    </div>
  </div>
</body>

</html>

Unable to override $theme-color in bootstrap

Update 2021 for Bootstrap 5

Per the guidance in the docs...

"Variable overrides must come after our functions are imported, but
before the rest of the imports."

Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss

/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

Update 2018 for Bootstrap 4.1

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the default value, and will then be set in all the theme-colors loops (btn-primary, bg-primary, text-primary, etc..)...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';

Demo: https://www.codeply.com/go/lobGxGgfZE

Also see this answer

Text color not working in Material-UI Theme

In order to have white text for both colors, you want:

const colortheme = createMuiTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});

The contrastText must be specified within each color intention.

Here's a full example showing this:

Edit 81xpxy6312

Documentation: https://material-ui.com/customization/palette/#providing-the-colors-directly

Can Not Use Theme Color with Text or Bg