Ionic v8 - Create Even Better Hybrid Apps
Tags: ionic, angular, webdev, news
Published: 2024-04-02 21:15:35

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.

```css
: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.

```css
@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](https://ionicframework.com/docs/theming/themes#application-colors) and [stepped colors](https://ionicframework.com/docs/theming/themes#stepped-colors) when the [CSS media query for `prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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.

```css
@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](https://ionicframework.com/docs/v8/theming/dark-mode).

## 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](https://ionicframework.com/docs/v8/theming/color-generator).

```css
@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](https://www.w3.org/TR/WCAG21/). If you'd like to use the colors right away in your existing Ionic application, you can visit the updated [color generator website](https://ionicframework.com/docs/v8/theming/color-generator).


![ionic high contrast theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r16sop1l507floukup5.png)

To improve the contrasts even more, Ionic added new stepper tokens that allow us developers to control text and background colors more independently.

```css
: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](https://ionicframework.com/docs/v8/layout/dynamic-font-scaling).

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


![new action sheet component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gxqgz4d4605pg2y27t3.png)

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


![new picker component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uenbsc3b9azzv2q7op7.png)

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.

```html
<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](https://ionicframework.com/docs/v8/updating/8-0).

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