angular / angular/components

feat(all theming): Clean and reusable way to override all components theme colors

オープン
#30,244 コメント 0 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/core feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Feature Description

Currently, there is a way to generate a custom color palette using the generation tool. However, all components appear too dark regardless of the target color, and there is no single-line solution to specify a base color tone for all components since `--mat-sys-primary` is hardcoded to the tone value `40` by the theme mixin.

Unfortunately, with Material v19, picking colors from the theme no longer works. You can still specify a material theme using `$app-theme: mat.define-theme(...)` with some restrictions, but applying it using the new mixin `@include mat.theme($app-theme)` doesn't work.

**So please provide clean and simple solution to:**

**1. Specify and reuse a theme object**
For example:
```scss
// Define theme object
$app_theme: mat.define-theme((
color: (primary: $primary-palette),
...
)); // Like it was in Material 18

// then use this theme object to apply theme or get theme color:
@include mat.theme($app-theme);
$theme-color: mat.get-theme-color($app-theme, primary, 70);

```
**2. Specify a base color tone for all components at once**
For example:
```scss
@include mat.theme((
color: (
theme-type: light,
primary: themes.$app-theme-palette, // Generated color palette
primary-color-tone: 70 // Here we specify which tone level to pick from color palette for --mat-sys-primary color
...
)
));
```
**_or as an alternative_** output all theme-palette tones as css variables, so we can easily reuse them to customize theme and component colors:
```scss
@include mat.theme-overrides((
primary: var(--mat-sys-primary-70),
on-primary: var(--mat-sys-primary-100)
));

@include mat.autocomplete-overrides((
background-color: var(--mat-sys-primary-80); // or any other custom color
));

```

**3. Specify a base color for a specific component (single-line override)**
For example:
```scss
@include mat.autocomplete-overrides((
base-color: mat.get-theme-color($theme, primary, 30); // or any other custom color
));
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、言及されている mat.define-theme、mat.theme、mat.get-theme-color、mat.theme-overrides、mat.autocomplete-overrides のエントリポイントと、それらがテーマカラーをどのように扱うかを確認します。issue ではファイルやテストは指定されていません。完了時には、再利用可能なテーマオブジェクト、設定可能なベーストーン、説明されている制限のない1行でのコンポーネントカラーのオーバーライドを提供する必要があります。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, scss
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。