#20 Angular Material theme customised instead of adding custom styles

angular.json

@@ -30,7 +30,8 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/assets/scss/theme.scss"
             ],
             "scripts": []
           },
@@ -98,7 +99,8 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/assets/scss/theme.scss"
             ],
             "scripts": []
           }

src/app/components/calculate/results/results.component.html

@@ -20,7 +20,8 @@
           <mat-checkbox *ngIf="expenseItem.specialExpense; else nameField"
                         [disabled]="expenseItem.exceededAmount"
                         (change)="updateExpenseItemCheckedState()"
-                        [(ngModel)]="expenseItem.checked">
+                        [(ngModel)]="expenseItem.checked"
+                        color="primary">
             <p [ngStyle.lt-md]="{'font-weight': '500'}"
                [ngClass.lt-md]="'margin-top-sm'"
                class="margin-bottom-zero">

src/assets/scss/theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+@include mat-core();
+
+$my-app-primary: mat-palette($mat-deep-purple);
+$my-app-accent:  mat-palette($mat-red);
+$my-app-warn:    mat-palette($mat-amber);
+$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+
+@include angular-material-theme($my-app-theme);

src/styles.scss

@@ -165,12 +165,3 @@ body {
   font-size: 18px !important;
 }
 
-.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
-.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
-  background: #673bb7;
-}
-
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
-  background-color: #673bb7;
-}