Today, the Ionic team released Ionic v8 RC 0 to the public. Let's explore the changes and new features of this major release of the popular mobile UI framework.
Introducing Built-in Dark Mode and High Contrast Theme
Currently, developers must define the default dark mode colors manually by defining and overriding CSS variables.
:root {
--ion-item-background: white;
}
@media (prefers-color-scheme: dark) {
body {
/* global app variables */
}
.ios body {
--ion-item-background: black;
}
.md body {
--ion-item-background: black;
}
}
With Ionic v8, the need for multiple CSS files or the definition of multiple color variables can be eliminated by importing a new default theme file.
@import '@ionic/angular/css/palettes/dark.system.css';
/* use dark theme exclusiv */
@import '@ionic/angular/css/palettes/dark.always.css';
This sets the application colors and stepped colors when the CSS media query for prefers-color-scheme is dark. The dark theme is now applied to the :root selector instead of the body selector. The [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the <html> element and is identical to the selector html, except that its specificity is higher. Of course, we can still add our own dark mode styles if we need to.
@media (prefers-color-scheme: dark) {
:root {
--ion-item-background: black;
}
}
If you're interested in learning more about the additional theming features, I recommend reading the updated dark mode docs.
High Contrast Theme
To enhance the readability of our apps, Ionic has introduced a new high-contrast theme and revised the default colors for new Ionic projects. The Ionic team ensured that the new default colors align with the Web Content Accessibility Guidelines. If you wish to apply these colors immediately to your existing Ionic application, you can visit the updated color generator.
@import '@ionic/angular/css/palettes/dark.class.css';
...
.ion-palette-dark {
--ion-item-background: black;
}
To improve the readability of our apps, Ionic has added a new high contrast theme and revisited the default colors when creating a new Ionic project. The Ionic team made sure the new default colors match the Web Content Accessibility Guidelines. If you'd like to use the colors right away in your existing Ionic application, you can visit the updated color generator website.
To improve the contrasts even more, Ionic added new stepper tokens that allow us developers to control text and background colors more independently.
:root {
--ion-text-color-step-50: #f2f2f2; /* only used for text */
--ion-background-color-step-50: #0d0d0d; /* only used for background */
}
button {
- background: var(--ion-color-step-50);
+ background: var(--ion-background-color-step-50);
}
Dynamic Fonts
Ionic v8 now include dynamic font scaling enabled by default, replacing the --ion-default-dynamic-font variable with --ion-dynamic-font. To deactivate dynamic fonts, set the variable to --ion-dynamic-font: initial. Dynamic fonts will be enabled by default for projects created with the v8 CLI. For a more detailed explanation of dynamic fonts, I recommend reading the updated documentation.
iOS 17 Action Sheet
Ionic has always tried to keep up with recent changes added to Material Design on Android and the Human Interface Guidelines for iOS. With Ionic v8, the Ionic team updated the action sheet component to follow the latest iOS 17 and Material Design changes. Developers are now able to disable action sheet buttons if needed.
Enhanced Picker Component
One feature that I missed in the previous releases is an easy-to-use, user-friendly picker component. Because I was not the only developer expressing this need, the Ionic team added the requested component in v8.
The new component is not only simpler to use across all supported web frameworks, but it also has improved performance, which is important when the picker displays a long list of possible options. Here, you can see an example from the official Ionic blog post, showing the simple template to define the picker UI in your template.
<ion-picker>
<ion-picker-column value="red">
@for (option of options) {
<ion-picker-column-option [value]="option.value">
{{ option.text }}
</ion-picker-column-option>
}
</ion-picker-column>
</ion-picker>
Upgrading from v7 and Breaking Changes
Ionic v8 requires some changes to our existing applications. As the list of each component that has changed would be too long, I will provide a brief overview. If you wish to read through the full list of changes, I recommend you consult the upgrade guide.
- Ionic v8 requires Angular 16+, React 17+ or Vue 3.0.6+
- The list of supported browsers have been updated
- The component APIs, such as inputs, items, checkboxes, etc., deprecated in Ionic v7 have been removed. The modern form control syntax introduced in v7 must now be used.
Conclusion
So, Ionic v8 is here and it's packed with new features and improvements. It'll help devs build slicker, more user-friendly mobile apps. They've finally simplified adding a dark mode and a high contrast theme to your apps. They've also thrown in dynamic fonts and leveled up the picker component, which definitely improves the user experience. Plus, they've made sure your apps are up-to-date with the latest versions of Angular, React, and Vue. Ionic continues to assist developers in building fast, native-looking apps with modern web technology standards, especially with the upcoming release of Capacitor v6. More details about this future release will be shared later this month.
Top comments (0)