Angular / Materials 3 - Define a theme

I create a theme with the materials prompt : ng generate @angular/material:theme-color

He generate a file theme 'm3-theme-orange-blue.scss' from primary: #0097A7, secondary: #26C6DA, tertiary: #FFA726, neutral: #F1F8F9 :

// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #0097A7, secondary: #26C6DA, tertiary: #FFA726, neutral: #F1F8F9
$_palettes: (
primary: (
0: #000000,
10: #001f24,
20: #00363d,
25: #00424a,
30: #004f58,
35: #005b66,
40: #006874,
50: #008392,
60: #1b9faf,
70: #46bacb,
80: #66d6e7,
90: #97f0ff,
95: #d0f8ff,
98: #edfcff,
99: #f6feff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #001f24,
20: #00363d,
25: #00424a,
30: #004f58,
35: #005b66,
40: #006874,
50: #008392,
60: #009fb1,
70: #06bcd0,
80: #45d8ed,
90: #98f0ff,
95: #d0f8ff,
98: #edfcff,
99: #f6feff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #2b1700,
20: #472a00,
25: #563400,
30: #663e00,
35: #764800,
40: #865300,
50: #a86900,
60: #cb8000,
70: #ed9912,
80: #ffb961,
90: #ffddb9,
95: #ffeede,
98: #fff8f4,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #161d1e,
20: #2b3233,
25: #363d3e,
30: #414849,
35: #4c5455,
40: #586061,
50: #717879,
60: #8b9293,
70: #a5acae,
80: #c1c8c9,
90: #dde4e5,
95: #ebf2f3,
98: #f4fbfc,
99: #f7fdfe,
100: #ffffff,
4: #080f10,
6: #0e1516,
12: #1a2122,
17: #242b2c,
22: #2f3637,
24: #333a3b,
87: #d4dbdc,
92: #e2e9ea,
94: #e8eff0,
96: #eef5f6,
),
neutral-variant: (
0: #000000,
10: #121d1f,
20: #273234,
25: #323d3f,
30: #3d494b,
35: #495457,
40: #556063,
50: #6d797b,
60: #879395,
70: #a1adb0,
80: #bcc9cb,
90: #d8e5e7,
95: #e7f3f5,
98: #effcfe,
99: #f6feff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);

$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $primary-palette,
tertiary: $tertiary-palette,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $primary-palette,
tertiary: $tertiary-palette,
),
));


In my styles.scss file :

// 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.
@use "styles/m3-theme-orange-blue";

@use "./app/layout/layout-component.theme";
@use "./app/app.component";
@use "./app/layout/menu-item/menu-item-component.theme";
@use "styles/styles-crous";
@use "styles/table-theme";
@use "styles/form-theme";

// 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.elevation-classes();
@include mat.app-background();

$theme: m3-theme-orange-blue.$light-theme;

$compact-theme: mat.define-theme(
(density: (
scale: -3,
), typography: (
brand-family: Roboto,
regular-weight: 300,
),
)
);


// 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.
:root {
@include mat.all-component-themes($theme);
@include layout-component.theme($theme);
@include app.theme($theme);
@include menu-item-component.theme($theme);
@include mat.button-color($theme);

@include mat.form-field-density($compact-theme);
@include mat.form-field-typography($compact-theme);
@include mat.table-density($compact-theme);

// Fix mat-form-label disparait avec une densité trop faible
& {
--mat-form-field-filled-label-display: block;
--mat-form-field-filled-with-label-container-padding-top: 18px;
--mat-form-field-filled-with-label-container-padding-bottom: 0px;

// Input - placeholder grey, value black
--mdc-filled-text-field-input-text-placeholder-color: grey;
--mdc-filled-text-field-input-text-color: black;


}

}


// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
// @include mat.typography-hierarchy($angular-material-theme);

// Comment out the line below if you want to use the deprecated `color` inputs.
// @include mat.color-variants-backwards-compatibility($angular-material-theme);
/* 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;
}

.primary {
@include mat.button-color($theme: $theme, $color-variant: 'primary');
}

.secondary {
@include mat.button-color($theme: $theme, $color-variant: 'secondary');
}

.tertiary {
@include mat.button-color($theme: $theme, $color-variant: 'tertiary');
}

.danger {
@include mat.button-color($theme: $theme, $color-variant: 'error');
}

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {

@include mat.card-overrides((
elevated-container-shape:20px,
title-text-line-height:1.4,
));


mat-card-content {
padding-top: 10px;
background-color: rgba(mat.get-theme-color($theme, primary-container), 0.10);
}

.mat-mdc-dialog-title {
padding: 0;
margin-bottom: 5px;
}

// Header des tableaux
@include mat.table-overrides((
header-headline-weight:550,
header-headline-size:14px,
header-container-height:40px
));

mat-select {
@include mat.select-overrides((
trigger-text-size:14px,
));

}


mat-option {
min-height: 38px;
@include mat.option-overrides((
label-text-size:14px,
label-text-line-height:18px,
));
}

/**
* Boutton suppression des champs input des filtres réduits
*/
table.table-with-filter mat-form-field [matSuffix] {
padding: 0;
height: 18px;
width: 12px;

&.material-icons {
font-size: 12px;
}
}

table.table-with-filter thead tr:nth-child(2) {
background-color: rgba(mat.get-theme-color($theme, primary-container), 0.20);
border-top: 2rem solid rgba(mat.get-theme-color($theme, primary-container), 0.90);
max-height: 30px;

.mat-mdc-header-cell {
height: 45px;
}

th {
padding-top: 0 !important;
}

mat-form-field {
.mat-mdc-form-field-subscript-wrapper {
line-height: 0;
height: 0;
}
}
}
}


And finally, I want to customize my toolbar with the primary color :

@use "@angular/material" as mat;

@mixin theme($theme) {
.mat-toolbar {
background-color: rgba(mat.get-theme-color($theme, primary-container), 0.95);
--mdc-protected-button-hover-container-elevation-shadow: rgba(0, 0, 0, 0.25) 0px 7px 7px, rgba(0, 0, 0, 0.12) 0px -8px 8px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 7px 7px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
}


But the color is not matching my primary color #0097A7



I don't know, what is wrong...

Continue reading...