How to override theme colors now?

I’ve noticed in _variables.scss that the brand colours have been moved to a nested object.

Up to now, I‘ve been specifying variable overrides in a _custom.scss in my projects like this:

@import "custom";
@import "node_modules/bootstrap/scss/bootstrap";

I’d then override the variables I wanted in my _custom.scss file like this:

$brand-primary: #fc0;

$font-family-sans-serif: "Open Sans", sans-serif;

How do I override values on a per-variable basis now that they’re inside an object? For example, I have a project where I want the brand’s primary color to be green and not blue.

Sorry if this a n00b question, but I’m under the impression that object members like $theme-colors[primary] aren’t overridable in Sass without overriding the whole object, in which case these seriously reduces the configurability of Bootstrap in version 4.

If I’m doing something wrong, or I can override specific members of objects in Sass, then please let me know.

[martinbean]

is the biggest concern that this feels heavy handed when compared to the old $brand-{color} variables?

@mdo Exactly that. When overriding a $brand-{color} variable, I’m overriding what I want, and only what I want. To copy over a whole Sass map just to change one colour in that map just seems overly cumbersome, especially when I also have to re-define the individual colour variables referenced in that map, i.e. $blue et al. So changing the primary color goes from this:

$brand-primary: #006600;

To this:

$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;

$red: #dc3545;
$yellow: #ffc107;
$green: #006600; // This is the only variable I wanted to change
$cyan: #17a2b8;

$theme-colors: (
  primary: $green,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
);

[houfio]

If you don’t need any of the other colors you can just do

$theme-colors: (
  primary: #006400
)

since all the calls to the map are loops.