AppStd/DigitalData.UserManager
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Angular Material-Thema angepasst

Browse Source
This commit is contained in:
Developer 02 2024-07-23 13:20:32 +02:00
parent b880a3245d
commit 0405c9722b
2 changed files with 85 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
DigitalData.UserManager.API/ClientApp/user_manager_ui/angular.json
View File

@ -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"

81
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/dd-mat-theme.scss Normal file
View File

@ -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);
}