From 0405c9722b495688f8524498cf08ebc3972f6c5e Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Tue, 23 Jul 2024 13:20:32 +0200
Subject: [PATCH] feat: Angular Material-Thema angepasst

---
 .../ClientApp/user_manager_ui/angular.json    |  6 +-
 .../user_manager_ui/src/dd-mat-theme.scss     | 81 +++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 DigitalData.UserManager.API/ClientApp/user_manager_ui/src/dd-mat-theme.scss

diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/angular.json b/DigitalData.UserManager.API/ClientApp/user_manager_ui/angular.json
index e4b5017..e773daf 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/angular.json
+++ b/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"
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/dd-mat-theme.scss b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/dd-mat-theme.scss
new file mode 100644
index 0000000..b255b95
--- /dev/null
+++ b/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);
+}