feat: Angular Material-Thema angepasst

DigitalData.UserManager.API/ClientApp/user_manager_ui/angular.json

@@ -32,7 +32,8 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/dd-mat-theme.scss"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
@@ -106,7 +107,8 @@
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/dd-mat-theme.scss"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/dd-mat-theme.scss

@@ -0,0 +1,81 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$palette: (
+  50: #e8eaf6,
+  100: #c5cae9,
+  200: #9fa8da,
+  300: #7986cb,
+  400: #5c6bc0,
+  500: #3f51b5,
+  600: #3949ab,
+  700: #303f9f,
+  800: #283593,
+  900: #1a237e,
+  A100: #8c9eff,
+  A200: #3143a3,
+  A400: #213083,
+  A700: #10173f,
+  contrast: (
+    50: rgba(black, 0.87),
+    100: rgba(black, 0.87),
+    200: rgba(black, 0.87),
+    300: white,
+    400: white,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: white,
+    A100: black,
+    A200: black,
+    A400: black,
+    A700: black,
+  )
+);
+
+$dark-palette: mat.$amber-palette;
+$light-palette: mat.$blue-grey-palette;
+
+$typography: mat.define-typography-config(
+  $font-family: 'Roboto, sans-serif',
+  $headline-1: mat.define-typography-level(32px, 48px, 700),
+  $body-1: mat.define-typography-level(16px, 24px, 400)
+);
+
+$dark-primary: mat.define-palette($dark-palette);
+$dark-accent: mat.define-palette($dark-palette);
+$dark-warn: mat.define-palette($dark-palette);
+
+$dark-theme: mat.define-dark-theme((
+ color: (
+   primary: $dark-primary,
+   accent: $dark-accent,
+   warn: $dark-warn,
+ ),
+ typography: $typography,
+ density: 0,
+));
+
+// Define a light theme
+$light-primary: mat.define-palette($light-palette);
+$light-accent: mat.define-palette($light-palette);
+$light-warn: mat.define-palette($light-palette);
+
+$light-theme: mat.define-dark-theme((
+ color: (
+   primary: $light-primary,
+   accent: $light-accent,
+   warn: $light-warn,
+ ),
+ typography: $typography,
+ density: 0,
+));
+
+.mat-color-scheme-light{
+  @include mat.all-component-themes($light-theme);
+}
+.mat-color-scheme-dark{
+  @include mat.all-component-themes($dark-theme);
+}