How to change the color code of primary, secondary, etc.. and also add new ones in Angular 11

[RRGT19]

Description
I'm using Angular with this template and I would like to use the color of our brand for the buttons. That means, we need to change the color code of the primary, secondary, and so on. Also, we have a special color code for special buttons, we would like to add a new name for a new color to the colors options in the template.

To Reproduce
When we add the class btn-primary, text-primary or bg-primary, we would like to have this color instead: #EF9D20
The same thing for the rest of the colors, apply them a custom color code.

Also, add a new name for a color, for example btn-special, text-special and bg-special. With the color code: #431612

What I have tried
I have added this to the styles.scss:

$theme-colors: (
  "primary": #EF9D20,
  "secondary": #A41E2C,
  "danger": #ff4136,
  "success": #82BC00,
  "warning": #E48200,
);

@import '~bootstrap/scss/bootstrap-reboot';
@import '~bootstrap/scss/bootstrap';

But, this way breaks the design of a few elements, making them smaller, bigger or in a different position on the screen. Because of this weird behavior, we discarded this solution.

Environment:

• AdminLTE Version: 3.0.5
• Angular 11.0.2

Additional context
My goal is:

1. How to change the color code of te primary, secondary, etc...
2. How to add a new name for a color, for example special