ionic-framework
ionic-framework copied to clipboard
ionic-team
feat: ios 26 style support
Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Add support for iOS 26 design language across Ionic components. This includes updated styles, transitions, system interactions, new native UI behaviors, and any system-level visual changes introduced in iOS 26. The goal is to ensure Ionic apps continue to feel native and aligned with Apple’s latest design standards.
Describe the Use Case
Apps built with Ionic targeting iOS should reflect the current system design to maintain a modern, platform-consistent user experience. With iOS 26 introducing changes to gestures, components, or animations, this feature would help developers adopt the latest platform expectations without custom hacks or overrides.
Describe Preferred Solution
There are two possible approaches: Introduce a new mode, mode="ios26", that specifically implements the styles and behaviors of iOS 26. This would allow developers to opt into the new design without affecting existing apps using the current ios mode.
Or alternatively: Update the existing mode="ios" to reflect the new design changes in iOS 26, while ensuring backwards compatibility. This could be achieved through feature flags, version checks, or fallback mechanisms to maintain consistent behavior for apps targeting older iOS styles.
In both cases, the update should include changes to animations, component styles (e.g. modals, buttons, segment controls), and any new system behaviors introduced in iOS 26.
Describe Alternatives
- Manually override styles and animations via custom CSS and JS to mimic iOS 26 behavior (not ideal).
- Wait for community plugins or forks to introduce these updates (fragmented and inconsistent).
Related Code
No response
Additional Information
No response
Might be a great time to check on https://github.com/ionic-team/ionic-framework/issues/24282 too 👀
@reslear I agree. At the moment it's very problematic to implement this in pure CSS without JS.
I found an interesting post https://80.lv/articles/accurate-apple-s-liquid-glass-effect-recreated-with-css-svg that carries some demos but most are only executable in a Chromium-like browser. Which severely limits the use with WebKit inside Safari.
At the moment there are some interesting posts about how to implement a better solution. So far every one I've seen hasn't worked inside WebKit.
Just wanted to add some thoughts and a request for early implementation of the new iOS 26 design and styling updates across Ionic components.
Apple has released updated design resources for iOS 26, including Figma and Sketch files with the latest UI elements, spacing, typography, and component designs.
Build new apps that follow the latest native design guidelines
Ensure UX consistency across all supported iOS versions
🔗 Official Apple Design Resources: https://developer.apple.com/design/resources/
It would be especially helpful to focus on:
Styling updates for core components (e.g. buttons, inputs, toolbars, modals)
New layout behaviors, transitions, and gestures
Typography, spacing, and color system updates
Any changes related to dark mode or new safe area insets (especially if hardware shifts are expected)
Looking forward to seeing Ionic embrace the iOS 26 design language. Thanks again for staying ahead of the curve!
I would concur with David here. Styling (font, padding, border radius) updates to Ionic would be nice. Personally, I'm not at all interested in the glass effects. As a beta tester for iOS, I've notices that with each new release of iOS 26 the glass effects are quickly being toned down to something that could be approximated with a simple background blur in CSS.
with each new release of iOS 26 the glass effects are quickly being toned down
from a point of view at 27th jul, this was not really true. in beta4 apple had revert the style to beta1/2.
but to me the true reason might be from reslear
I don't think we'll ever get it :(
using web architecture to remake this liquid effect is hard 😭
@CNDY1390 interesting how figma export css for our Liquid Glass and appl integrated to our web interfaces
already 11 solutions:
https://ruri.design/blog/liquid-glass
https://ruri.design/glass
Anyway ionic were always the best, for example sheet modal still no one has repeated almost like the original.
iOS 26 has been released yesterday in Europe and many popular apps have already implemented the new Liquid Glass guidelines. Anyone has created a custom ionic Liquid Glass version ?
After spending some time looking at iOS 26, Ionic will look like iOS 6 for iOS 7 users
After spending some time looking at iOS 26, Ionic will look like iOS 6 for iOS 7 users
No, the last Ionic iOS design is iOS 18 (September 2024)
I’ve been exploring some visual changes that might be worth considering for the Ionic UI Kit as we look toward iOS 26. These are just ideas that, in my view, could be implemented with relatively low complexity while keeping things consistent with the current library.
Design Philosophy
My personal opinion is that we should try to minimize disruptive changes:
- Perhaps focus on the most visible design updates rather than reworking everything.
- Look for ways to reuse existing layout patterns so the migration feels natural and easier to maintain.
- Try to preserve the current behavior as much as possible while refreshing the look.
This might help us modernize the UI while keeping the overall development effort manageable.
Considerations
1. Inspiration from the iOS Phone App
The iOS Phone app seems to do a good job of combining the new visual style with older layout conventions.
Maybe we could take a similar approach: adopt the modern aesthetics without drastically changing familiar structures.
2. Liquid Glass Effects
The new iOS style relies heavily on Liquid Glass effects (blurred, distorted backgrounds).
THIS ARTICLE IS WELL WRITTEN HOW TO IMPLEMENT LIQUID GLASS: SVG Backdrop Guide
A few thoughts here:
- Implementation: Using SVG filters might be one of the simplest ways to achieve this:
- Browser Support: Safari doesn’t yet support SVG backdrop filters natively, so this might require some fallbacks.
- Performance: Maybe these effects could be optional or toggleable for devices with limited rendering power.
3. Layout Changes
The main challenge, I think, could be the new spacing rules:
- iOS 26 seems to use larger paddings and margins, which might impact existing components.
- It could be helpful to first identify which parts of the UI would be most affected before changing anything.
Possible Next Steps
If the team agrees, we could:
- Discuss each design change in more detail to see what makes sense.
- Maybe prototype the Liquid Glass effect with Stencil to understand feasibility.
- Prioritize avoid huge layout changes so we can keep things incremental rather than doing a full overhaul.
Hey guys, any news about this? An dev is working on a custom CSS to fit iOS26 look and feel?
Hey guys, any news about this? An dev is working on a custom CSS to fit iOS26 look and feel?
I would like to say that there is some news, but I still haven't found anything functional that would work well with WebKit through Safari on iOS (or MacOS Safari). Most demos only work in Chrome-like browser, so for now, I see it this way: even though we would all like to have the new look, at this point it won't be possible without modifying WebKit itself.
Below, I am attaching an excellent explanation of light refraction effects in the new Liquid Glass, and even there, the author states that it only works in Chrome and similar browsers through support for backdrop‑filter with SVG. https://kube.io/blog/liquid-glass-css-svg/ any case, every detail and calculation of the effects is explained there, which could help solve this problem in Ionic, but I doubt that anyone will want to solve it with pure JS/TS with a minimum of CSS. It would lead to unbearably slow rendering due to the complexity of the calculations in the case of multiple elements or not solving UI cleaning while the application is running.
Hi @jakubforman thanks for the quick response. I totally understand your point. But do you agree that we actually don't need a 100% Liquid Glass look and feel? If we just move to have components like tabs, buttons, segments, modals, toolbars with the same border-radius, padding and margin could be an excellent starting point. Even the actual Ionic's look and feel miss some of the previous design
Interesting
https://github.com/user-attachments/assets/309a2755-077d-41e1-a7f8-02619fd25517
.toolbar {
border-radius: 50%;
height: 75px;
width: 450px;
background: rgba(204, 204, 204, 0.7);
}
@supports (-apple-visual-effect: -apple-system-glass-material) {
.toolbar {
background: transparent;
-apple-visual-effect: -apple-system-glass-material;
}
}
source:
https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/
Hello all, I have worked to reproduce the iOS 26 Liquid Glass TabView with a html/css/javascript web component but without success, the quality is bad.
But I have created a custom capacitor plugin to have the native iOS 26 TabView.
- Good news : it is like a native app (native component) with the reflect and the animation.
- Bad news : the background is required to click on a tab item.
https://github.com/user-attachments/assets/4801f4bd-cb4c-4ce9-98ee-9e8e523e8900
https://github.com/user-attachments/assets/c30edeaf-d8d6-4fc7-a7dd-40bd50239052
I worked on this issue about two months ago and managed to reproduce the appearance to some extent. It might be of some reference, so I’ve made my CSS implementation publicly available here:
https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/ionic-theme-ios26
However, as mentioned above, many iOS26 designs cannot be fully recreated using only Ionic’s CSS. Also, due to my limited effort, it remains more of an “approximation.” I hope this can still be of some help.
After I recompiled my app with new macOS and XCode the new iOS 26 keyboard style is automatically applied. This leads to an issue within ionic modals. I therefore have already created an issue in the Capacitor Plugins repository.
Does anybody have a solution for this or is there a way to enforce the pre iOS 26 keyboard style within the newest XCode version?
@Dimibe The quickest solution is to set resize: none and handle it yourself.
https://github.com/ionic-team/capacitor/issues/1540#issuecomment-735221275
Hey all. I released @rdlabo/ionic-theme-ios26 demo. I tried to reproduce some iOS 26 design. I use Angular, but since this is just a CSS library, it works with React or Vue as well.
DEMO: https://ionic-theme-ios26.netlify.app
If you're interested in the project, check out this repository.
https://github.com/rdlabo-team/ionic-theme-ios26
Hey @rdlabo awesome!! Just tested here and worked like a charm!!
Do you have any estimate date for a stable release?
@erikramalho Thank you for your interest. While it can be used at this stage, the following steps are required to perform a Stable Release:
https://github.com/rdlabo-team/ionic-theme-ios26/issues/1
After that, I plan to improve the accuracy of each component individually and add additional designs.
I’ve been experimenting with the new Liquid Glass style from iOS 26, and I think the best way to bring this into Ionic is through a Capacitor plugin, so these elements can be created natively on iOS.
I’ve already started working on a first component for the tabs, using UITabBar with UITabBarAppearance and blur/translucency effects. It’s still a work in progress, I need to understand it better and refine the implementation, but the idea is to use this as a base and gradually add more elements with the same style.
My goal is to publish it as open source very soon.
https://github.com/user-attachments/assets/f8c569ac-838a-4127-9bac-08a6a6622fff
