CODEWITHSUNDEEP
cssangularangular-material
KleberBH
KleberBH

Reputation: 462

Angular material progress bar not loading primary color from theme

I am trying to override the primary color for angular material. I have a progress bar and button.

on .html

<button mat-flat-button color="primary">Continue</button>
<mat-progress-bar color="primary" mode="determinate" value="100" bufferValue="0"></mat-progress-bar>

on main.scss

@import "~@angular/material/theming";
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@include mat-core();

$mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: white,
    )
);
$app-primary: mat-palette($mat-blue, A400, A100, A800);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);

It displays the override color for the button, not for the progress bar.

enter image description here

there is no error in the console. I inspected the element and I can see the button css from node_modules/@angular/material/_theming.scss is placed in <style></style> and the progress bar is displayed from the node_modules/@angular/material/_theming.scss.

Angular 9.1.4 Angular material 9.2.2

What step am I missing? Any suggestion?

Edit:

I see this in the inspect element, for the button it is rendered in the <style>, for the progress bar is rendered like the image below.

enter image description here

Upvotes: 0

Views: 985

Answers (2)

Mr Smee
Mr Smee

Reputation: 1

Try puting this in main.scss

::ng-deep .mat-progress-bar-fill::after { background-color: #2979ff; }

Upvotes: 0

Moises Leonor
Moises Leonor

Reputation: 129

I tested your code with the same values that you are using and it works, and after that, I changed the color of A400 to #ff2929 and all works

enter image description here

  • Angular version: 9.1.6
  • Angular material version: 9.2.3

Upvotes: 1

Related Questions