feat(THEMING): Support configuration option for “Color match” (stay true to inputs) vs optimized role colors in Angular Material theming
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### Feature Description
Angular Material’s [theming system](https://material.angular.dev/guide/theming) uses the [Material 3 Custom Theme schematic](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md) 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](https://material-foundation.github.io/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](https://material-foundation.github.io/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](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md) 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](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md).
Additionally, the official [Figma Material Theme Builder plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) behaves the same way as [Material Theme Builder](https://material-foundation.github.io/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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia da src/material/schematics/ng-generate/theme-color/README.md e dal punto di ingresso dello schematic per i temi personalizzati Material 3. Confronta la generazione attuale di toni esatti con il comportamento ottimizzato dei colori di ruolo di Material Theme Builder, quindi definisci e documenta un flag CLI o un parametro di configurazione il cui valore predefinito mantenga il comportamento attuale e la cui modalità alternativa generi colori di ruolo ottimizzati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend, tooling
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100