angular / angular/components

feat(THEMING): Support configuration option for “Color match” (stay true to inputs) vs optimized role colors in Angular Material theming

Ouverte
#31,392 3 commentaires 10 réactions 0 personnes assignées Voir sur GitHub
area: material/core area: ng-generate feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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.
Color match ON

- When **unchecked**, role colors are optimized — adjusted for better contrast and visual harmony.
Color match OFF

#### 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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par src/material/schematics/ng-generate/theme-color/README.md et le point d’entrée du schematic de thème personnalisé Material 3. Comparez sa génération actuelle de tons exacts avec le comportement optimisé des couleurs de rôle de Material Theme Builder, puis définissez et documentez un flag CLI ou un paramètre de configuration dont la valeur par défaut conserve le comportement actuel et dont le mode alternatif génère des couleurs de rôle optimisées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend, tooling
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.