Skip to content

How to override theme colors now? #23112

@martinbean

Description

@martinbean

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions