Switch to SCSS

frontend/ng-karaoqueue/angular.json

@@ -25,7 +25,7 @@
             ],
             "styles": [
               "src/custom-theme.scss",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -90,8 +90,8 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./app/custom-theme.scss",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -124,5 +124,10 @@
       }
     }
   },
-  "defaultProject": "ng-karaoqueue"
+  "defaultProject": "ng-karaoqueue",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
 }

frontend/ng-karaoqueue/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'KaraoQueue';

frontend/ng-karaoqueue/src/custom-theme.scss

@@ -9,11 +9,15 @@
 // Be sure that you only ever include this mixin once!
 @include mat-core();
 
+@import 'palettes.scss';
+
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$ng-karaoqueue-primary: mat-palette($mat-indigo);
+$ng-karaoqueue-primary: mat-palette($md-stukblue);
-$ng-karaoqueue-accent: mat-palette($mat-pink, A200, A100, A400);
+$ng-karaoqueue-accent: mat-palette($md-stukred, A200, A100, A400);
+// $ng-karaoqueue-primary: mat-palette($mat-indigo);
+// $ng-karaoqueue-accent: mat-palette($mat-pink, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
 $ng-karaoqueue-warn: mat-palette($mat-red);

frontend/ng-karaoqueue/src/palettes.scss

@@ -0,0 +1,60 @@
+/* For use in src/lib/core/theming/_palette.scss */
+$md-stukblue: (50 : #e1e2e5,
+  100 : #b5b6bf,
+  200 : #848594,
+  300 : #535469,
+  400 : #2e2f48,
+  500 : #090a28,
+  600 : #080924,
+  700 : #06071e,
+  800 : #050518,
+  900 : #02030f,
+  A100 : #5252ff,
+  A200 : #1f1fff,
+  A400 : #0000eb,
+  A700 : #0000d1,
+  contrast: (50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #ffffff,
+    A200 : #ffffff,
+    A400 : #ffffff,
+    A700 : #ffffff,
+  ));
+
+$md-stukred: (50 : #f6e0e0,
+  100 : #e9b3b3,
+  200 : #db8080,
+  300 : #cd4d4d,
+  400 : #c22626,
+  500 : #b70000,
+  600 : #b00000,
+  700 : #a70000,
+  800 : #9f0000,
+  900 : #900000,
+  A100 : #ffbcbc,
+  A200 : #ff8989,
+  A400 : #ff5656,
+  A700 : #ff3c3c,
+  contrast: (50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #ffffff,
+  ));

frontend/ng-karaoqueue/src/styles.css

@@ -1,5 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

frontend/ng-karaoqueue/src/styles.scss

@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}