diff --git a/README.md b/README.md index 3b4de0a..b71182c 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,7 @@ A CSS/JS theme for Ionic applications, using Android Settings as its visual refe -Pixel 8a Android 17: light Material You colors applied to Ionic components Pixel 8a Android 17: dark Material You colors applied to Ionic components - -Pixel 8a, Android 17, with optional device colors enabled. +![Ionic MD3 theme with the default Ionic palette on Android 17](screenshots/md3.png) @@ -83,7 +81,7 @@ initialization code or Capacitor plugin is required. Back icons remain Ionic's r See [Android Settings appearance](docs/android-settings.md) for installation, font fallbacks and component overrides. Existing users should -review the [unreleased migration notes](docs/migration.md#unreleased-android-settings-alignment) +review the [9.2.0 migration notes](docs/migration.md#migrating-to-920-android-settings-alignment) for changes to toolbar, list and toggle dimensions. ### Optional: use the MD3 and iOS 27 themes together diff --git a/docs/dynamic-colors.md b/docs/dynamic-colors.md index 8b0cb71..84fe5a5 100644 --- a/docs/dynamic-colors.md +++ b/docs/dynamic-colors.md @@ -11,6 +11,14 @@ APIs from the `@rdlabo/capacitor-native-ui` root entrypoint. No activation of Na UI projection is needed. The theme conversion helper remains available from `@rdlabo/ionic-theme-md3/dynamic-colors`. +## Device color example + +Pixel 8a running Android 17, with optional Material You colors enabled. The default +theme works with Ionic's own palette; these screenshots show the additional native +color integration in light and dark appearance. + +Optional Material You colors in light appearance Optional Material You colors in dark appearance + ## Setup Install the theme and the native provider in your Capacitor application: @@ -23,8 +31,7 @@ npx cap run android The plugin's root exports and native getter are included in 2.1.3; an older native binary (for example 2.1.1) must be rebuilt, not just supplied with new JavaScript. -Use a theme release containing the mapping described below. The source guide can -include changes newer than the installed npm release; check its release notes. +Use theme 9.2.0 or later for the mapping described below. The [plugin guide](https://github.com/webview-native-ui/capacitor-plugin/blob/main/docs/dynamic-colors.md) documents availability, role types and native notifications. diff --git a/docs/migration.md b/docs/migration.md index 0e5cd1d..22221cc 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -8,18 +8,18 @@ Review every section newer than the version currently installed, in ascending or Each section lists only the changes that require application code or configuration updates. -## Unreleased: Android Settings alignment +## Migrating to 9.2.0: Android Settings alignment No template migration is required. Review application CSS that compensates for previous theme dimensions before adopting this update: -| Component | Previous theme | Updated theme | -| --- | --- | --- | -| Standard toggle | 52×32px track, 24px thumb | 52×28px track, 20px thumb | -| Regular toolbar title | 20px; 4px start padding beside start controls | 22px / 28px line; 12px start padding | -| Two-line inset item title | 18.4px, weight 500 | 16px, weight 400; note 14px | -| Grouped item minimum height | 48px | 56px; rows containing radio controls 72px | -| Headed inset lists | Additional list margin/padding | 56px heading; no extra block margin/padding | +| Component | Previous theme | Updated theme | +| --------------------------- | --------------------------------------------- | ------------------------------------------- | +| Standard toggle | 52×32px track, 24px thumb | 52×28px track, 20px thumb | +| Regular toolbar title | 20px; 4px start padding beside start controls | 22px / 28px line; 12px start padding | +| Two-line inset item title | 18.4px, weight 500 | 16px, weight 400; note 14px | +| Grouped item minimum height | 48px | 56px; rows containing radio controls 72px | +| Headed inset lists | Additional list margin/padding | 56px heading; no extra block margin/padding | These are theme defaults, not fixed content heights. Wrapping and application sizing overrides remain available. See [list sizing](using-ion-item-group.md#sizing-and-overrides) diff --git a/screenshots/md3.png b/screenshots/md3.png index bf0479c..8ae92ce 100644 Binary files a/screenshots/md3.png and b/screenshots/md3.png differ