Ionic Theme iOS26

Ionic アプリに iOS26 のデザインを適用する CSS・JavaScript テーマです。

デモを確認できます。

インストール

npm install @rdlabo/ionic-theme-ios26

Ionic の基本 CSS の後に、システム連動ダーク用のスタイルシートをグローバルに追加します。

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

既存の Ionic 初期化のオプションへ ios26ThemeConfig を展開します。iOS モードとテーマのアニメーションが設定されます。

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

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

Angular・React・Vue、ダークモードの選択、プレビューはセットアップを参照してください。個別の CSS、アニメーション、独自オプション、MD3 との併用は設定、既存アプリへの導入は移行を参照します。