Material Design 3 for the Ionic Framework

This repository provides a tool-set for generating Material Design 3 (MD3) style sheets, similar to the MD3 theme builder, and creates style overrides for the Ionic Framework in order to apply MD3.

Demo: Try the Ionic Framework kitchen sink demo with MD3 applied here on Vercel.

Run locally

You can run the code in this repository locally by cloning the repository and running npm install:

git clone https://github.com/danielkleebinder/md3-for-ionic.git
cd md3-for-ionic
npm install

Afterwards, just run the src/index.js file as node process:

node . --output="./out" --color=#ff0000 --with-ionic-overrides

The generator will derive primary, secondary, tertiary, a neutral, a neutral variant and an error color from the color you specified with --color=<hex>.

Add Overwrites

In order for your Ionic application to recognize your generated MD3 styles and Ionic overwrites, you have to copy the newly created md3/ folder (a sub-directory of your --output directory) into your Ionic project into src/theme. Afterwards, add the following line of CSS code at the bottom of your global.scss file:

@import "theme/md3/theme.css";

And that's it, you can now extend the existing theme files and enjoy your MD3. To also add manual dark mode toggling, add the following to your global CSS:

:root {
  color-scheme: light dark;
}

:root.prefers-light,
:root.ion-palette-light {
  color-scheme: light;
}

:root.prefers-dark,
:root.ion-palette-dark {
  color-scheme: dark;
}

Motion physics system (spring animations)

The motion physics system of Material Design 3 expressive is also partially implemented and supported by this library. Buttons, switches, segments make extensive use of spring animations.

Add Roboto Font (recommended)

If you would like to use the Roboto font as well, you have to include the following lines in your index.html file.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">

Contribute

This project is only supposed to be a helper to bridge the time between the release of the Material Design 3 (MD3) Guidelines and the point in time when the Ionic Framework eventually supports MD3. In order to make this project work, feel free to contribute by opening a pull request.

In order to test your contributions, I would recommend creating a new Ionic application to apply your styles. Each component has it's own css file in the directory md3/ionic/ and strictly follows the MD3 component specs. Extend those or create new component style files if necessary :-)