Kemot 90
Kemot 90

Reputation: 321

How to apply contrast to angular material theme m-3

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

Answers (0)

Related Questions