Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ A CSS/JS theme for Ionic applications, using Android Settings as its visual refe

<!-- rdlabo-docs-pick -->

<img src="screenshots/android17-light.png" alt="Pixel 8a Android 17: light Material You colors applied to Ionic components" width="270"> <img src="screenshots/android17-dark.png" alt="Pixel 8a Android 17: dark Material You colors applied to Ionic components" width="270">

Pixel 8a, Android 17, with optional device colors enabled.
![Ionic MD3 theme with the default Ionic palette on Android 17](screenshots/md3.png)

<!-- /rdlabo-docs-pick -->

Expand Down Expand Up @@ -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
Expand Down
11 changes: 9 additions & 2 deletions docs/dynamic-colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<img src="../screenshots/android17-light.png" alt="Optional Material You colors in light appearance" width="270"> <img src="../screenshots/android17-dark.png" alt="Optional Material You colors in dark appearance" width="270">

## Setup

Install the theme and the native provider in your Capacitor application:
Expand All @@ -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.

Expand Down
16 changes: 8 additions & 8 deletions docs/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Binary file modified screenshots/md3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading