ionic-team / ionic-team/ionic-framework

feat: Add Material Design 3 (Material You) support

未关闭
#24,282 53 条评论 388 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Recently, the new [Material Design 3](https://m3.material.io/) (publicly known as _Material You_) Guidelines were released. They are quite a cut compared to the current [Material Design 2](https://m2.material.io/), but are now considered the new standard on newer Android devices (Android 12+). Google is also updating all their apps to conform their new specs. Can we expect the Ionic Framework to support the new look and feel for Android devices, and if so, are there already any plans with which release we can expect it? Personally, I think Material You is a great improvement over MD2 and it would be nice if we could ship our apps with this new and awesome design as soon as possible.

Guidelines: [https://m3.material.io/](https://m3.material.io/)

### Describe the Use Case

As an Android 12+ user I want all my apps to fit into the new design ecosystem created by Google.

### Describe Preferred Solution

I think it would be nice if the Material You Design is an opt-in feature that developers can toggle themselves (for example during start up time dynamically or compiled into the final bundle). An exemplary configuration is listed below:

```typescript
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot({
mode: 'ios' | 'md' | 'md3'
}), AppRoutingModule],
providers: [{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
bootstrap: [AppComponent],
})
export class AppModule {
}
```

**EDIT**: It's been a few years since the creation of this issue and the Angular ecosystem has changed quite a bit. So here is a second exemplary configuration for standalone components:

```typescript
import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
providers: [
...,
provideIonicAngular({
mode: 'md3'
})
]
});
```

### Describe Alternatives

Provide some helper tools (for example using the CLI or some web tool) that automatically generates a CSS file based on a given primary color that overrides the default Ionic styles to match with the Material You Design Guidelines. Google themselves already created a tool like this for the web for native Android applications: [https://material-foundation.github.io/material-theme-builder/](https://material-foundation.github.io/material-theme-builder/)

### Related Code

_No response_

### Additional Information

_No response_

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。