Angular material change button style when switching to dark-mode

Question

What I want to achieve is that when I toggle dark and light mode in my app I want to change button style, when light mode is on I have mat-raised-button with primary color, when I toggle to dark-mode I want to change the button styles to mat-stroked-button .

I have my switch button in my header component:

 <mat-slide-toggle #slideToggle class="mat-primary" [checked]="isDarkTheme | async"
              (change)="toggleDarkTheme($event.checked)">&#9728;
            </mat-slide-toggle>

I can change the colors in my my-theme.scss but not the styles.

Is there a way to change the styles?

Answer 1

See if the following will suit your needs.

When your isDarkTheme toggle is on, apply a class to a wrapper around the rest of your app:

<div [ngClass]="{dark: dark}">

Then, add css rules similar to mat-stroked-button that override the mat-raised-button when it is in a wrapper with the .dark class.

.dark .mat-raised-button {
  background-color: #fff;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none;
}

You might have to add some more rules to account for colors and such, but this should at least be a technique to get the effect you are after.

https://stackblitz.com/edit/angular-u6bgtp?file=src%2Fstyles.scss