ionic-team / ionic-team/ionic-framework

feat: Add Material Design 3 (Material You) support

Open
#24,282 53 comments 388 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.