Getting Started

A CSS/JS theme library that applies iOS26 design system to Ionic applications.

DEMO is here: https://ionic-theme-ios26.rdlabo.dev/

Installation

npm install @rdlabo/ionic-theme-ios26

After Ionic's base CSS, add the system-dark stylesheet to your global stylesheet.

@import '@rdlabo/ionic-theme-ios26/styles/system.css';

Spread ios26ThemeConfig into your existing Ionic initializer's options. The
configuration supplies iOS mode and theme animations.

import { ios26ThemeConfig } from '@rdlabo/ionic-theme-ios26';

const ionicConfig = {
  ...ios26ThemeConfig,
  // animated: false,
};

Follow Set up the theme for Angular, React, and Vue examples,
dark-mode selection, and a preview. Use Configuration
for individual CSS and animation exports, custom options, and iOS 26 with MD3.
Existing applications can adopt the wrappers using Migration.

Documentation

• Using ion-item-group — required markup for inset lists.
• Special markup and classes — opt-in markup and utility classes used by the theme.
• ESLint — check list structure with ESLint rules.
• Features — CSS variables, Liquid Glass, selective imports, and dark mode.
• Experimental Animation — tab bar and searchable effects.
• iOS 18 — load the theme only on iOS 26.
• Migration — optional wrapper adoption and version-specific upgrade steps.