angular / angular/components

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

Abierto
#31,392 3 comentarios 10 reacciones 0 asignados Ver en GitHub
area: material/core area: ng-generate feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con src/material/schematics/ng-generate/theme-color/README.md y el punto de entrada del schematic de temas personalizados de Material 3. Compara su generación actual de tonos exactos con el comportamiento optimizado de colores de rol de Material Theme Builder y, a continuación, define y documenta un flag de CLI o un parámetro de configuración cuyo valor predeterminado conserve el comportamiento actual y cuyo modo alternativo genere colores de rol optimizados.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, tooling
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.