Description
Feature Description
Angular Material’s theming system uses the Material 3 Custom Theme schematic to generate theme files based on user input. However, it currently lacks support for choosing between true input colors and role-optimized tones.
In contrast, Google’s Material Design specification uses optimized role colors by default — as seen in tools like the Material Theme Builder — whereas Angular Material’s custom theme schematic defaults to using exact seed color tones. This feature request proposes a configuration option to bridge that gap and align Angular Material theming more closely with Material Design’s intended behavior.
Background
The Material Theme Builder includes a checkbox labeled:
Color match
Stay true to my color inputs.
-
When checked, role colors closely follow the input seed palettes.
-
When unchecked, role colors are optimized — adjusted for better contrast and visual harmony.
Current Material 3 Custom Theme schematic
Angular Material Custom Theme schematic currently behaves like “Color match” checked — it uses palette tones that stay true to the input colors.
Feature Request
Please add support for a configuration option to let developers choose between:
- “Color match checked” — use palette tones exactly as input (current default behavior).
- “Color match unchecked” — use optimized role colors (tone adjustments per role) for improved harmony and accessibility, like Material Theme Builder’s unchecked mode.
This could be implemented by:
- Providing a CLI flag or configuration parameter to specify the preferred mode during theme generation.
Benefits
- Allows developers to choose between exact color fidelity or an optimized theme.
- Aligns Angular Material theming closer to Google’s Material Design and the official Theme Builder behavior.
- Creates a consistent and accurate workflow across design and code, improving collaboration between designers and developers.
Use Case
Design-to-code accuracy
Developers can faithfully implement themes exported from the Material Theme Builder — especially those created with “Color match” unchecked — without manually extracting and assigning role-based tones.
For example, if I design a theme in the Theme Builder with “Color match” unchecked (to get optimized role colors for better visual harmony), I currently have no direct way to use those exact role-based colors in my Angular Material project. While I could technically apply those colors manually using alternative approaches (e.g., setting CSS variables or custom tokens), it's not an elegant or scalable solution — especially when compared to the integrated experience provided by the Material 3 Custom Theme schematic.
Additionally, the official Figma Material Theme Builder plugin behaves the same way as Material Theme Builder, generating role colors based on the “Color match” setting. Having support for this behavior in Angular Material would create a consistent and accurate workflow across design and code, improving collaboration between designers and developers.