1 files changed, 51 insertions, 0 deletions

diff --git a/overlays/spm/frontend/src/custom-theme.scss b/overlays/spm/frontend/src/custom-theme.scss
new file mode 100644
index 00000000..5c2d48aa
--- /dev/null
+++ b/overlays/spm/frontend/src/custom-theme.scss
@@ -0,0 +1,51 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// 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/
+$spm-frontend-primary: mat.define-palette(mat.$indigo-palette);
+$spm-frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$spm-frontend-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$spm-frontend-light-theme: mat.define-light-theme((
+  color: (
+    primary: $spm-frontend-primary,
+    accent: $spm-frontend-accent,
+    warn: $spm-frontend-warn,
+  )
+));
+
+$spm-frontend-dark-theme: mat.define-dark-theme((
+  color: (
+    primary: $spm-frontend-primary,
+    accent: $spm-frontend-accent,
+    warn: $spm-frontend-warn,
+  )
+));
+
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($spm-frontend-dark-theme);
+
+[data-color-scheme="light"] {
+  @include mat.all-component-colors($spm-frontend-light-theme);
+}
+
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }