Skip to content
WebView Native UIdocs

Getting Started

A CSS/JS theme for Ionic applications, using Android Settings as its visual reference while preserving Ionic component APIs and color semantics.

DEMO is here: https://ionic-theme-md3.rdlabo.dev/

Designed for compatibility with @rdlabo/ionic-theme-ios27, so one markup tree can style both Ionic modes.

Installation

Use the setup guide to install the package, import
@rdlabo/ionic-theme-md3/styles/theme.css, and spread md3ThemeConfig into your
existing Ionic initializer's options. Ionic >=8.8.0 <10 is supported. Apps on older Ionic
versions can use @rdlabo/ionic-theme-md3@1.0.2.

For existing apps, follow the optional setup simplification.
For individual CSS files and animation settings, use configuration.

Android Settings appearance

The theme keeps Ionic's color semantics and application font overrides. Standard
toggles are icon-free. The MD font default uses the device's local Google Sans Flex
when available, with standard fallbacks; it is included in the theme CSS. No font
initialization code or Capacitor plugin is required. Back icons remain Ionic's responsibility.

See Android Settings appearance for installation,
font fallbacks and component overrides. Existing users should
review the 9.2.0 migration notes
for changes to toolbar, list and toggle dimensions.

Optional: use the MD3 and iOS 27 themes together

Follow combined theme configuration
for stylesheet ordering and platform-based animation selection.

Documentation

  • Setup — install and configure the theme with the theme stylesheet and configuration object.
  • Configuration — individual stylesheets, animations and existing mode selection.
  • Android dynamic colors — opt-in Material You setup, light/dark appearance, lifecycle and role mapping.
  • Color system — Ionic palette defaults, optional Material roles and component color assignments.
  • Android Settings appearance — default geometry, CSS font defaults and Ionic customization.
  • Using ion-item-group — shared inset-list markup for iOS 27 and MD3.
  • Special markup — opt-in component combinations used by the demo.
  • ESLint — check list structure with ESLint rules.
  • Migration — optional setup simplification and version-specific upgrade steps.

If you need a more comprehensive Material Design 3 implementation, you may also be interested in:

Note: This theme is purpose-built for compatibility with Ionic's design approach and @rdlabo/ionic-theme-ios27; it is not intended as a strict, full MD3 recreation.

Edit this page on GitHub