Announcing the Ionic 8 Beta

Today we are thrilled to announce the release of the Ionic 8 beta! This release is the culmination of many months of hard work by the development team and brings improvements to theming, accessibility, and more!

Let’s dive in 🚀

Simplified APIs for Importing Themes

Ionic 8 now ships both the light and dark themes built into the project. For added convenience, the light theme is automatically imported via the core.css file. Importing the dark theme is as simple as importing a single CSS file:

import '@ionic/react/css/palettes/dark.system.css';

In Ionic 7 and earlier, developers added light and dark themes by manually copying and pasting design tokens into their applications. However, as Ionic evolved, we discovered that this solution was hard for developers to maintain as well as hard for us to scale.

The above stylesheet will apply the dark theme based on the system settings for a user’s preferred color scheme. With this approach, developers will always receive the latest and greatest light and dark themes whenever they update Ionic. Additionally, developers can continue to customize our themes!

But wait, there’s more! Developers still have full control over how the dark theme is applied. For example, developers can configure their application to always apply the dark theme or only apply the dark theme when a CSS class is present on the body element. This can be done by importing either the dark.always.css or dark.class.css files.

As part of this, we’ve revamped the Dark Mode documentation to give you more information about how to apply the dark theme stylesheet effectively.

Revised Color Palette

Also in Ionic 8 is a revised color palette that focuses on improving color contrast. Each color token (primary, secondary, success, etc) now meets AA contrast levels as defined by the Web Content Accessibility Guidelines when used with a proper contrast color. This increases readability in your Ionic application as users can more easily distinguish the foreground from the background.

In Ionic 7 and earlier we realized that certain colors had low color contrast even when used against the recommended contrast colors. We want to make it easy to build accessible experiences with Ionic, and having accessible colors is an important part of that.

Thanks to the new API for importing themes, it’s easy for developers to take advantage of these revised color tokens upon updating to Ionic 8! Developers can continue to customize the color tokens, too.

To showcase these new colors, we’ve updated the Color Generator.

High Contrast Theme

The revised color palette is great for ensuring AA level compliance for color contrast, but what about scenarios where we need even higher levels of color contrast? In Ionic 8, we are pleased to introduce the new high contrast light and dark themes! With these themes, each color token now meets AAA contrast levels for text when used with a proper contrast color. Additionally, other details such as item borders and sub text also have increased color contrast.

Thanks to the new API for importing themes, developers can easily opt-in to these high-contrast themes by importing the light and dark CSS files:

import '@ionic/react/css/palettes/high-contrast.system.css';
import '@ionic/react/css/palettes/high-contrast-dark.system.css';

iOS and Android have system-level settings allowing users to enable or disable the high-contrast theme. As with the previous theme improvements noted in this blog, we’ve also provided high-contrast.always.css and high-contrast.class.css files to give you full control over when these themes are applied.

Check out the new High Contrast Documentation for more information.

New Step Color Tokens

To better support the previously mentioned high contrast theme, we are introducing a new set of step color tokens. These step colors allow developers to control text colors independently of background colors.

:root {
  --ion-text-color-step-50: #f2f2f2; /* only used for text */
  --ion-background-color-step-50: #0d0d0d; /* only used for background */
}

 In previous versions of Ionic, we had tokens that followed the syntax --ion-color-step-[number]. These step colors provided a grayscale palette for customizing background and text at the same time. This architecture proved challenging for the high contrast theme as simply darkening the step color values would actually reduce color contrast.

For example, for ion-datetime-button, making the step colors darker would cause the black text in the button to be displayed against a dark gray background, which defeats the purpose of the high contrast theme.

Ionic 8 is backward compatible with the older --ion-color-step-[number] tokens, so developers do not need to migrate immediately. However, we recommend adopting them as soon as possible as they are required to use the high contrast theme.See the Stepped Color Documentation for more information.

Revised Styles for iOS 17

We’ve also made several small changes to our iOS components to better align with the iOS 17 design system. Most of these changes are fairly subtle, but one notable feature is the ability to disable action sheet buttons. Previously, all buttons in an action sheet were always enabled. We’ve also added this behavior to the Material Design variant of action sheet so users can have a consistent experience across platforms.

Check out the Action Sheet documentation for more.

New Picker Experience

Last but certainly not least in the line of new features is the new Picker experience in Ionic. With the introduction of the new Datetime in Ionic v6, you may have noticed that the component sported a new inline Picker. We’ve been piloting this new experience as part of an internal component only available inside Datetime. With Ionic 8, we are excited to finally roll this experience out to all developers!

This new experience has several notable advantages over the Picker found in previous versions of Ionic:

1. Improved performance: Thanks to CSS Scroll Snapping, the new Picker experience comes with the same smooth scrolling behavior found in traditional native applications. This means the swipe interactions will run up to 120fps on supported devices! Additionally, developers can expect to see improved scrolling performance even on less powerful devices.
   
2. Presentation flexibility: Previous versions of the Picker always displayed the component as an overlay that sat on top of your page content. The new Picker experience gives the flexibility to render the Picker either as an overlay or directly in line with your page content. Additionally, the new Picker can be rendered in either a Modal or a Popover instead of always being fixed at the bottom of the screen.

3. Compatibility with JavaScript framework template features: Previous iterations of the Picker required that developers pass an array full of several options to the Picker in order to render columns with options. This was not a great experience because it meant that developers needed to pass that same large payload any time they wanted to alter a single option or column. For example, if developers wanted to remove or add an option, they would need to set each option in each column for the Ppicker again.
   
   Since columns and options can be written directly using the new ion-picker-column and ion-picker-column-option components, developers can take full advantage of the templating capabilities provided by each JavaScript framework.

For example, this feature allows Angular developers to iterate through column options using an @for. Any time the associated data array changes, Angular will re-render and automatically add or remove the appropriate column option components. This new approach is great for displaying reactive data.

<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>

Not ready to take advantage of the new Picker experience? Fear not! The Picker experience found in Ionic 7 is still available with the ion-picker-legacy component.

Check out the Picker documentation for more examples of all the great things you can do with this component.

Legacy Form Control Syntax Removal

In Ionic 7, we introduced a new form control syntax that brought the following improvements:

1. Reduces code boilerplate by removing the ion-item and ion-label requirements.
2. Improves compatibility with assistive technologies by ensuring the form control is associated with a label.
3. Enhances the developer experience by clarifying the intent of form component APIs.

This new syntax improves the accessibility of Ionic apps while reducing technical debt with Ionic Framework, making it easier than before to fix bugs and add new features.

During the Ionic 7 development cycle, developers could continue using the legacy form control syntax if they did not want to upgrade immediately. We heard a lot of feedback from developers regarding bugs and missing features. We’ve been listening to your feedback, and the team worked hard throughout 2023 to resolve the highest priority bugs and add missing features from our implementation.

Now that the highest priority bugs have been resolved and the features that developers needed to migrate to the new form control syntax have been added, it’s time to retire the legacy form control syntax.
As of Ionic 8, the legacy property on form controls, as well as support for the legacy form control syntax has been removed.

Commitment to an Easy Upgrade Process

While breaking changes are one tool that allows us to continue to improve Ionic, we realize they are disruptive to your work. As a result, we have kept breaking changes to a minimum in Ionic 8. Many of the breaking changes do not require any code updates by developers. Additionally, many of the larger breaking changes have had migration paths available for over a year, allowing developers to migrate early and avoid some of the Ionic 8 breaking changes.

Try the Ionic 8 Beta

Developers can start with the Ionic 8 beta by visiting the Ionic 8 migration guide. Developers should also consult the Ionic 8 breaking changes guide.

As always, any bug reports can be filed on the Ionic Framework repo.

Starter applications will continue to use Ionic 7 and will only be updated to ship with Ionic 8 once Ionic 8 is formally released.

Thank You

Ionic 8 is another huge step forward for Ionic applications with great enhancements to theming, accessibility, revised iOS designs, and the new Picker experience. We’d like to thank the community for their continued support of this project. Ionic 8 would not have been possible without your efforts!