customize colors in ng-bootstrap Angular 14

Viewed 55

I added ng-bootstrap via angular cli.

what I import at the end of my styles.scss:

@use "sass:map";
@import '../shared';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

// Bootstrap Theme
$primary: map.get($colors,'primary');
$accent: map.get($colors,'accent');
$success: map.get($colors,'accent-light');
$info: map.get($colors,'primary-light');
$warning: map.get($colors,'accent-dark');
$danger: map.get($colors,'red');
$light: map.get($colors,'white-dark');
$dark: map.get($colors,'gray-dark');

$theme-colors: (
  primary: $primary,
  secondary: $accent,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $light,
  dark: $dark,
);

@import '~bootstrap/scss/bootstrap';

But somehow those colors are not used. in angular.json I have

        "styles": [
          "src/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          

But even removing from the styles array and just importing it into styles.scss doesnt do the trick. Any ideas how to change the default colors?

0 Answers
Related