ionic-team / ionic-team/ionic-framework

feat: Add Material Design 3 (Material You) support

Đang mở
#24,282 53 bình luận 388 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.