Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Recently, the new Material Design 3 (publicly known as Material You) Guidelines were released. They are quite a cut compared to the current Material Design 2, 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/
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:
@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:
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/
Related Code
No response
Additional Information
No response