angular / angular/components

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

Offen
#31,392 3 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/core area: ng-generate feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit src/material/schematics/ng-generate/theme-color/README.md und dem Einstiegspunkt des Schematics für benutzerdefinierte Material 3-Themes. Vergleiche die aktuelle Erzeugung exakter Tonwerte mit dem optimierten Verhalten für Rollenfarben des Material Theme Builder und definiere und dokumentiere anschließend ein CLI-Flag oder einen Konfigurationsparameter, dessen Standardwert das aktuelle Verhalten beibehält und dessen alternative Betriebsart optimierte Rollenfarben erzeugt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, tooling
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.