Releases: rdlabo-dev/ionic-theme-ios27
Release list
iOS 27 theme v1.1.0
Highlights
- Native UI Shell follows UI changes without a lingering fade. Tab switches now retire outgoing native controls immediately instead of leaving a crossfade over the destination tab. Native controls also retire as a modal starts presenting. Stack navigation keeps its existing animated handoff.
- Toggle colors match Ionic's defaults. A checked
ion-togglenow uses--ion-color-primaryby default. Toggles with an explicitcolorcontinue to use that color. - npm 12 and ESM compatibility. The theme now depends on the published
@rdlabo/ionic-theme-utils@0.1.1package instead of a Git SHA. The shared package includes built JavaScript with resolvable ESM imports, so installs no longer requireallow-git=allfor this dependency.
Fixes
- Preserved detail spacing for inset list items in right-to-left layouts.
- Prevented a brief lens-origin flash in segments.
- Updated shared navigation transition utilities to refresh fixed back-button coordinates before the transition.
Upgrade
npm install @rdlabo/ionic-theme-ios27@^1.1.0If your project added allow-git=all only for this theme's shared utility dependency, you can remove it and regenerate your lockfile. See issue #217 for the original report.
iOS 26 theme v9.4.0
Highlights
- Toggle colors match Ionic's defaults. A checked
ion-togglenow uses--ion-color-primaryby default. Toggles with an explicitcolorcontinue to use that color. - npm 12 and ESM compatibility. The theme now depends on the published
@rdlabo/ionic-theme-utils@0.1.1package instead of a Git SHA. The shared package includes built JavaScript with resolvable ESM imports, so installs no longer requireallow-git=allfor this dependency.
Fixes
- Prevented a brief lens-origin flash in iOS 26 segments.
- Updated shared navigation transition utilities to refresh fixed back-button coordinates before the transition.
Upgrade
npm install @rdlabo/ionic-theme-ios26@^9.4.0If your project added allow-git=all only for this theme's shared utility dependency, you can remove it and regenerate your lockfile. See issue #217 for the original report.
ios27-v1.0.4
Contributors
Assets 2
ios27-v1.0.3
What's Changed
Commits
Contributors
Assets 2
ios26-v9.3.4
What's Changed
Commits
Contributors
Assets 2
ios26-v9.3.3
What's Changed
Commits
Contributors
Assets 2
ios27-v1.0.2
Highlights
This release adds a tab-bar-style glass appearance for ion-segment and improves the spacing of search bars placed inside iOS toolbars.
Upgrade
npm install @rdlabo/ionic-theme-ios27@1.0.2No migration is required. Existing segments and search bars keep their current styling unless they use the new opt-in class.
Glass segments
Add segment-style-glass to an ion-segment to give its background and selected indicator the same glass treatment as the tab bar:
<ion-segment class="segment-style-glass" value="available">
<ion-segment-button value="available">
<ion-label>Available</ion-label>
</ion-segment-button>
<ion-segment-button value="away">
<ion-label>Away</ion-label>
</ion-segment-button>
</ion-segment>The class preserves the segment's existing dimensions and text colors, works with scrollable segments, and respects Ionic's public --background custom property.
To place the segment directly above a tab bar, put it in an ion-toolbar inside ion-footer. The theme does not add positioning or an extra gap, so the layout remains under your app's control.
Search bars in toolbars
Search bars inside ion-toolbar now use corrected horizontal spacing, including the visible cancel-button state. The adjustment is automatic; no markup or class changes are needed.
Documentation and packaging
- Added a complete setup example for using the iOS 27, iOS 26, and MD3 themes together.
- Added Sass load-path troubleshooting for projects where
meta.load-css()cannot resolve packages. - Updated the bundled theme utilities packaging.
What's changed
Full changelog: ios27-v1.0.1...ios27-v1.0.2
ios26-v9.3.2
Highlights
This release adds a tab-bar-style glass appearance for ion-segment and improves toolbar behavior for fullscreen content and search bars.
Upgrade
npm install @rdlabo/ionic-theme-ios26@9.3.2No migration is required. Existing segments keep their current styling unless they use the new opt-in class. The toolbar and searchbar corrections apply automatically.
Glass segments
Add segment-style-glass to an ion-segment to give its background and selected indicator the same glass treatment as the tab bar:
<ion-segment class="segment-style-glass" value="available">
<ion-segment-button value="available">
<ion-label>Available</ion-label>
</ion-segment-button>
<ion-segment-button value="away">
<ion-label>Away</ion-label>
</ion-segment-button>
</ion-segment>The class preserves the segment's existing dimensions and text colors, works with scrollable segments, and respects Ionic's public --background custom property.
To place the segment directly above a tab bar, put it in an ion-toolbar inside ion-footer. The theme does not add positioning or an extra gap, so the layout remains under your app's control.
Fullscreen toolbars
Opaque ion-header and ion-footer toolbars paired with a fullscreen ion-content now clear their internal toolbar background correctly. This matches the fullscreen layout behavior already used by the newer theme while preserving non-translucent header and footer configuration.
No markup changes are needed. The fix applies when the page uses a direct fullscreen iOS content element:
<ion-header>
<ion-toolbar>...</ion-toolbar>
</ion-header>
<ion-content fullscreen>...</ion-content>Search bars in toolbars
Search bars inside ion-toolbar now retain their UIKit-style shadow without being clipped and use corrected spacing for start and end buttons. The adjustment is automatic; no markup or class changes are needed.
What's changed
- feat(segment): add tab-style glass appearance (#192)
- fix(toolbar): clear opaque chrome over fullscreen content (#191)
- fix(searchbar): keep UIKit styling within toolbars (#190)
Full changelog: ios26-v9.3.1...ios26-v9.3.2