feat(THEMING): Support configuration option for “Color match” (stay true to inputs) vs optimized role colors in Angular Material theming
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
### 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.
贡献指南
调研方向
从 src/material/schematics/ng-generate/theme-color/README.md 和 Material 3 自定义主题 schematic 入口点开始。将其当前的精确色调生成与 Material Theme Builder 优化的角色颜色行为进行比较,然后定义并记录一个 CLI 标志或配置参数,其默认值保留当前行为,而替代模式生成优化的角色颜色。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend, tooling
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100