Ionic on the third week of April, announced the launch of Ionic 8. After a couple of betas and suggested improvements by the Ionic community, finally, the Ionic 8 has now been released. So the question arises, what is the enhancement and upgrade to Ionic 8? There are significant advancements in theming, a new Picker experience, accessibility, advanced iOS designs, and a new password toggle component.
Let's take a detailed look at the upgrade to Ionic 8.
Ionic UI components follow the Web Content Accessibility Guidelines (WCAG) on mobile apps to assist developers in building user-friendly apps. Thus, two significant accessibility features are added to Ionic 8.
AA Color Contrast
AAA High Contrast Palette
A revised color palette is introduced to improve the color contrasts and combinations. When developers make use of proper contrast color, every token (primary, secondary, success, etc.) will meet AA contrast levels as well-defined by the WCAG. This will help your audience easily tell apart the foreground and the background, making your app more readable and simple to use.
The New colors are updated in the Ionic Color Generator. So, developers can create a custom color palette for your project's user interface. Update a color’s hex values, check the demo app on the right to confirm, and then copy and paste the generated code directly into your Ionic project.
In circumstances where developers require an even higher level of color contrast, you now have high-contrast light and dark palettes. With the introduction of these palettes, every color token touches AAA contrast levels for text when incorporated with a proper contrast color.
Ionic also released a new range of step color tokens. This is done to support the high-contrast color palette. The new set of step colors will permit developers to manage the text colors independently of the background colors.
With Stepped Color Generator, develop a custom background and text color theme for your app. Alter the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.
In Ionic 7 and earlier versions, developers manually added light and dark palettes by copying and pasting design tokens into their respective applications. However, this solution was difficult to maintain and scale.
Therefore, Ionic 8 has both the light and dark palettes built into the app or project. The light palette is automatically imported via the core.css file for convenience. Importing the dark theme is as simple as importing a single CSS file:
import '@ionic/react/css/palette/dark.system.css';
The above stylesheet employs a dark palette based on the system settings for a user’s preferred color scheme.
There are three ways through which you can employ a dark palette that is- always, based on system settings, or by using a CSS class.
Always
The default palette provided with Ionic Framework can be changed to the dark palette by importing the following stylesheet in the appropriate files:
For Angular: @import '@ionic/angular/css/palettes/dark.always.css';
For JavaScript: import '@ionic/core/css/palettes/dark.always.css';
For React: import '@ionic/react/css/palettes/dark.always.css';
For Vue: import '@ionic/vue/css/palettes/dark.always.css';
System
The system approach to employing dark mode includes checking the system settings for the user's choice of color scheme. Importing the following stylesheet in the appropriate file will automatically gather the user's preference from the system settings and apply the dark palette when dark mode is opted for:
For Angular: @import '@ionic/angular/css/palettes/dark.system.css';
For JavaScript: import '@ionic/core/css/palettes/dark.system.css';
For React: import '@ionic/react/css/palettes/dark.system.css';
For Vue: import '@ionic/vue/css/palettes/dark.system.css';
CSS Class
The above two methods are excellent however you may need to use this third method to apply the dark palette conditionally such as through a toggle, or if you want to extend the functionality based on system settings. Importing the following stylesheet into the required file will provide the necessary styles for using the dark palette with the class:
For Angular: @import '@ionic/angular/css/palettes/dark.class.css';
For JavaScipt: import '@ionic/core/css/palettes/dark.class.css';
For React: import '@ionic/react/css/palettes/dark.class.css';
For Vue: import '@ionic/vue/css/palettes/dark.class.css';
Since iOS 17 was released, the design specifications have continuously been changing and evolving. Now the Ionic components are updated to match them. Among the 'fairly subtle' changes, a remarkable update is the ability to disable Action Sheet buttons. Earlier, all the buttons in an Action Sheet were always enabled. This behavior is also included in the Material Design variant of the Action Sheet so that the developers and users can have a steady experience across all platforms.
Introduced in Ionic 6, the new DateTime component included a new inline Picker. After a successful pilot testing, the new experience is now available for the developers. The Picker Documentation has all the examples of the new things you can do with the components.
One example of it is an Ion-picker: A Picker displays one or more columns with options for users to choose from.
<ion-picker>
<ion-picker-column value="javascript">
<ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
<ion-picker-column-option value="javascript">Javascript</ion-picker-column-option>
<ion-picker-column-option value="typescript">Typescript</ion-picker-column-option>
<ion-picker-column-option value="rust">Rust</ion-picker-column-option>
<ion-picker-column-option value="c#">C#</ion-picker-column-option>
</ion-picker-column>
</ion-picker>
Furthermore, Ionic also introduced the latest component in Ionic 8 during the beta period. This new component is The ion-input-password-toggle component that permits developers to toggle text visibility in a password input.
As Ionic rightly said, it wouldn't be Ionic if the migration process was complicated. Breaking changes is most times challenging, they understood this and in this version, they have kept it to a minimum. For a fact, multiple breaking changes don't even require any code updates by the developers.
The Ionic 8 is a milestone in the journey of the Ionic app. This guide defines the latest updates and features for the developers. From significant advancements in theming, accessibility, revised iOS designs, and the new Picker experience. This development in Ionic 8 will bring convenience and transparency to the developers and the project. Let us see what other improvements will come in 2024.
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.