feat(theme-generator): Add possibility to force custom color @angular/material:theme-color

[zygarios]

Feature Description

My problem is that I still can't understand how @angular/material:theme-color works. In the terminal, I need to provide colors for primary, secondary, and tertiary. For each one, I specify a single color, like #ff9500, because that's what I want.

What HEX color should be used to generate the M3 theme? It will represent your primary color palette. (ex. #ffffff) **#005dba** What HEX color should be used represent the secondary color palette? (Leave blank to use generated colors from Material) **#005dba** What HEX color should be used represent the tertiary color palette? (Leave blank to use generated colors from Material) **#005dba**

However, when generating the theme, I see that it creates color palettes, but when I try to get just my color, I use --mat-sys-primary. Unfortunately, it appears significantly darker (#8c5000), and I don't know which variable the color is actually hidden under. I have the impression that due to the low contrast, it is being artificially darkened. However, I selected the option not to generate mixins with high contrast. I would like to be able to use exactly that color without worrying about contrast. Currently, I am forced to manually change all the system token colors because the generated palette still interferes too much with what I want to achieve, taking away the flexibility I need in this case.

Use Case

It would be great to be able to specify in the terminal that I want exactly the colors I mention, without any interference.

[jimivdw]

Very big +1. The fact that you cannot provide exact colors to an M3 theme is a deal breaker for me. Not being able to use my company's brand colors just because they aren't "up to Material's standards" just feels wrong.

I know I can manually override every color variable, and I will do so when support for M2 gets dropped eventually, but this is just very annoying and I really hope there will be an easier way to use exact colors for a theme.

[amysorto]

@zygarios For each color specified, those colors are used directly to create color palettes of tones that match that color's hue and chroma. If you only specify a single color or a subset, the other colors get created in relation to each other. So there shouldn't be much adjusting happening if you specify everything and aren't requesting high contrast.

Although, Material defines --mat-sys-primary as tone 40 in your primary palette. Typically the color used to create the color palette usually closest to tone 50 in the color palette, which is why it is slightly off to what you are expecting.

Although I do see what you are saying, it would be ideal if you can specify maybe the primary color and then the color palette gets extracted from that to get more color accuracy and be more intuitive. I'll leave this issue open so this can be looked into.

In the meantime, overriding colors is your best option for complete customization: https://material.angular.io/guide/theming#system-tokens

[richardsengers]

This is a very blocking issue right now.
It's beautifull having all kinds of colors, but our customers want at least a toolbar with their brand color.

An example (a very ugly primary color but just to let you see the difference):

in the new M3

@amysorto overriding the colors isn't the best option, because we don't know the text contrast colors

An example for changing the mat-toolbar

@use '@angular/material' as mat;
:root {
  @include mat.toolbar-overrides((
    container-background-color: var(--primary-color), // instead of using a palette color, since the brand collor is not within the palette
    container-text-color: var(--mat-sys-on-primary), // then we don't know what the contrast color of var(--primary-color) is
  ));
}

we should have someting like this #30070 so we can use

@use '@angular/material' as mat;
:root {
  @include mat.toolbar-overrides((
    container-background-color: var(--mat-sys-primary-40),
    container-text-color: var(--mat-sys-on-primary-40), 
  ));
}

But then I'm still missing my brand color

[richardsengers]

For those interested, I've created a small function which sets all theme tones to css vars, which you can use in your own color palette

import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';

const hueTones = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
// Map of neutral hues to the previous/next hues that
// can be used to estimate them, in case they're missing.
const neutralHues = new Map<number, { prev: number; next: number }>([
  [4, { prev: 0, next: 10 }],
  [6, { prev: 0, next: 10 }],
  [12, { prev: 10, next: 20 }],
  [17, { prev: 10, next: 20 }],
  [22, { prev: 20, next: 25 }],
  [24, { prev: 20, next: 25 }],
  [87, { prev: 80, next: 90 }],
  [92, { prev: 90, next: 95 }],
  [94, { prev: 90, next: 95 }],
  [96, { prev: 95, next: 98 }],
]);

const neutralHueTones = [...hueTones, ...neutralHues.keys()];
export function setCSSVariablesFromM3Theme(hex: string) {
  const m3ThemeColorsJSON = themeFromSourceColor(argbFromHex(hex));
  for (const [variant, palette] of Object.entries(m3ThemeColorsJSON.palettes)) {
    const paletteKey = variant.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
    const tones = paletteKey === 'neutral' ? neutralHueTones : hueTones;
    for (const tone of tones) {
      const color = tone === 40 && paletteKey === 'primary' ? hex : hexFromArgb(palette.tone(tone));
      document.documentElement.style.setProperty(`--m3-${paletteKey}-color-${tone}`, color);
    }
  }
}

First you need to pnpm i @material/material-color-utilities which is used internally by the theme-color scheme.

My code is just a little change from what the scheme does
node_modules/@angular/material/schematics/ng-generate/theme-color/index_bundled.js (getColorPalettesSCSS(colorPalettes) function)

Offcourse not an ideal thing to do, but now I can set a brand color to tone 40 and I have all tones as css variables from one hex value.

[amysorto]

As a status update, I looked into this a bit further and it isn’t so so straightforward unfortunately. As an example, take these two colors: #003846 (the darker blue) and #2ED5FF (the lighter blue).

Tonal palettes are created from a color’s hue, but its tone is adjusted (which are the values seen in the tonal palette image above). Both of these colors share the same hue so they share the same tonal palette. Both of these themes would create the same value for the primary color role. The material components theming system picks the color from the palettes for any color role (ex. tone 40 for the primary color role).

The issue with changing the tonal palette itself is how the different colors relate to each other. For example if we tweak the tonal palette so that tone 40 matches either the lighter blue color #2ED5FF (which has a tone of ~79), the other tones need to be adjusted to account for color contrast. Although this could get weird because other palettes would also need to be adjusted, but those colors can also be customized.

It feels like because of the constraints of the material color system, it makes sense for applications who want exact colors to set things themselves to ensure there is adequate color contrast between their palettes. The color roles should be adjusted, not the tonal palettes themselves.

Although having access to the CSS vars of the tonal palettes as mentioned in #30070 is useful so you can do something like this in your application:

@include mat.theme-overrides((
  primary: var(—mat-sys-primary80),
));

I’ll leave this issue open since it seems useful to provide a more accurate theme to the provided colors. It would likely require more careful planning since it would cause us to move away from Material’s color system to make this work.

[richardsengers]

" It would likely require more careful planning since it would cause us to move away from Material’s color system to make this work."

True, but Material 3 theming seems primarily tailored for mobile and Android apps. In contrast, many Angular Material components are used in large web-based applications (based on nothing, just what I think :-)), where achieving the same aesthetic appeal as on Android, particularly with different tonal palette colors, can be more challenging. For instance, consider a dashboard: many applications built with Angular Material include a header featuring a brand color.

Offcourse we can override everything... but like you said it seems useful to provide a more accurate theme to the provided colors for Angular Material

[zygarios]

Off topic: I have to say that I started using @angular/material:theme-color in a new project with the option to generate tokens as CSS instead of SASS, and I think it's infinitely better. For the first time, I feel like I have proper control over the components, I know what options are available, and I understand where specific properties come from. It's great that some edge-case properties are described in comments. It could be even more detailed, though, because, for example, I still don’t understand the purpose of "fixed" tokens or many from the Neutral group—where they might be needed and whether I can safely remove them. Nonetheless, I really want to appreciate the introduction of CSS-based tokens. Great job, it’s a so much better than mixins with scss! Thank you Angular Material Team😊

[richardsengers]

@amysorto it seems like M3 has an option for Color Match

https://material-foundation.github.io/material-theme-builder/

I think something like this should be added to the scheme, don't you think?
I'm unable to determine what the option actually does behind the scenes.

[depyronick]

I've tried to use the generated palette from the material theme builder (the json export) but when I enable the color match option, the sass-loader of angular complains about invalid colors.

I think it would be good to have the option to color match when creating the custom theme with @angular/material:theme-color.

[zygarios]

I can highly recommend you to use CSS material generator pallete. Its do much better to use