更改 Bootstrap btn-primary class 的默认颜色

Question

I know I can simply do this in my SCSS file. But I would like to know the correct way to do it via customizing the actual Bootstrap colors. I have already figured out how to change background colors on the buttons.

I created a custom-bootstrap.scss file in which I modified the $primary and $danger variables and then imported Bootstrap. custom-bootstrap.scss:

// Override default variables before the import
$primary: #48BF91;
$danger: #CF6676;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

This is my inspector showing where it sets the text color to black from the _buttons.scss file.

Edit: So right now, this is how I am currently changing the button text color. Just by adding this code into my own SCSS file. But it feels too hacky for me, I want to modify the Bootstrap variables.

.btn-primary {
    color: $text;

    &:hover {
        color: $text;
    }
}

Answer 1

use this type

:root {--button-color: black; --button-background-color: silver;}