Reputation: 321
I have some difficulty applying the contrast color to the new theming m-3.
m-2 configuration allowed us to use contrast like this
$mat-warn: (
50: #fee8e7,
100: #fcc6c3,
200: #faa19b,
300: #f87b72,
400: #f75e54,
500: #f54236,
600: #f43c30,
700: #f23329,
800: #f02b22,
900: #ee1d16,
A100: #ffffff,
A200: #ffebeb,
A400: #ffbab8,
A700: #ffa19e,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $dark-primary-text,
)
);
but we can't use it with m-3
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
$_palettes: (
primary: (
0: #000000,
10: #001849,
20: #002b74,
25: #0f3683,
30: #20428f,
35: #2e4f9c,
40: #3b5ba9,
50: #5674c4,
60: #708ee0,
70: #8ba9fc,
80: #b2c5ff,
90: #dae2ff,
95: #eef0ff,
98: #faf8ff,
99: #fefbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #151b2c,
20: #2a3042,
25: #353b4d,
30: #404659,
35: #4c5265,
40: #585e71,
50: #71768b,
60: #8b90a5,
70: #a5aac1,
80: #c0c6dd,
90: #dde2f9,
95: #eef0ff,
98: #faf8ff,
99: #fefbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #2b122b,
20: #422741,
25: #4e324d,
30: #5a3d59,
35: #664965,
40: #735471,
50: #8d6d8b,
60: #a986a5,
70: #c4a0c0,
80: #e1bbdc,
90: #fed6f9,
95: #ffebf9,
98: #fff7fa,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #1b1b1f,
20: #303034,
25: #3b3b3f,
30: #46464a,
35: #525256,
40: #5e5e62,
50: #77777a,
60: #919094,
70: #acaaaf,
80: #c7c6ca,
90: #e4e2e6,
95: #f2f0f4,
98: #fbf8fd,
99: #fefbff,
100: #ffffff,
4: #0d0e11,
6: #131316,
12: #1f1f23,
17: #292a2d,
22: #343438,
24: #39393c,
87: #dbd9dd,
92: #e9e7ec,
94: #efedf1,
96: #f5f3f7,
),
neutral-variant: (
0: #000000,
10: #191b23,
20: #2e3038,
25: #393b43,
30: #45464f,
35: #50525a,
40: #5c5e67,
50: #757780,
60: #8f909a,
70: #aaaab4,
80: #c5c6d0,
90: #e1e2ec,
95: #f0f0fa,
98: #faf8ff,
99: #fefbff,
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: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
use-system-variables: true,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
use-system-variables: true,
),
));
I have read material documentation about color but haven't found anything about that.
I have read https://material.angular.io/guide/theming and https://m3.material.io/styles/color/roles but not find anything that helped me.
I want to change the contrast because with some palettes the default contrast applied to reach the text unreadable
Upvotes: 4
Views: 321