Ionic8で変更されたテーマカラーとダークモードの設定を見直す

もう随分前（今みたら今年の4月なんですねIonic8がリリースされたの）になりますが、Ionic8で変更されたテーマカラーとダークモードについて見直してみようと思っています。「アップグレードする時に変更しなくても特に壊れない」変更でしたので、先送りしたまま設定を忘れてしまっている方はぜひご確認ください。

AAカラーコントラストのテーマカラー

昨年、次の記事を書きました。今までのデフォルトテーマカラーは、WCAGというアクセシビリティに準拠したコントラストではなかったので、アップデートして対応するようになったという内容です。

https://qiita.com/rdlabo/items/c96278364bcb25b4d2f1

それを更に強化する形で、Ionic8のデフォルトスターターテンプレートから、 theme/variables.scss が空になりました。

https://github.com/ionic-team/starters/blob/main/angular-standalone/base/src/theme/variables.scss

新しいデフォルトテーマを使うなら、Ionicコアのスタイルに内包されてるから書く必要ないですよという形です。もちろん、昔のままの variables.scss を使い続けると、そのコアスタイルをオーバーライドできるので、そのまま使い続けることもできます。そういう形で、非破壊的な変更に位置しますが、「 variables.scss を空にするだけで新しいテーマが使える」ようになったのがv8の変更点です。

また同時に、AAカラーコントラストがIonic Docsのカラージェネレーターで生成されるようになり、推奨されるようになりました。今まで通り、キーカラーをここで設定して、生成されるスタイルをコピペするだけなので簡単で便利ですよね。

https://ionicframework.com/docs/theming/color-generator

ちなみに、現在利用しているカラーテーマがWCAGに準拠しているかどうかは、このサイトで確認できます。

https://webaim.org/resources/contrastchecker/

ダークモードの設定

同時にダークモードの設定方法も変更されました。まず大きな変更として、Ionic 7までのダークモードは、特にユーザにtoggleで設定できる機能を提供する場合は body.dark のように body タグにclassをつける形でした。それが、Ionic 8では :root （つまり html タグ）に ion-palette-dark というclassをつける形になりました。ですので、以下のように変更になっています。

Before:

/* Class Dark Mode */
body.dark {
    /* global app variables */
    
    &.ios {
        /* global ios app variables */
    }
}

After:

:root.ion-palette-dark {
  body {
    /* global app variables */
  }

  .ios body {
    /* global ios app variables */
  }
}

:root というのは、HTMLのルート要素を指すので、 body によりも意味合い的には @media (prefers-color-scheme: dark) に近くなってすっきりしましたよね。

---

また、 variables.scss で基本的なダークモードの設定をしていたものが、 CSSをインポートするだけになりました。ダークモードに対応するためのCSSファイルは、用途に応じて3つ用意されています。

• 常にダークモード
• システム設定に従うダークモード（OSのデフォルトモード次第）
• ユーザの設定に従うダークモード（ユーザがToggleなどで設定）

そのため、 variables.scss でのダークモード設定を更新し、基本的なダークモード設定はCSSをインポートする形となっています。また、以前のステップカラーの設定も以下のように更新されていますので、更新することは忘れないようにしましょう。

Before:

button { background: var(--ion-color-step-400); }

After:

button { background: var(--ion-background-color-step-400); }

まとめ

ついついアップデート時に壊れないなら後回しにしがちなカラー設定ですが、アクセシビリティに配慮したテーマカラーとダークモードの設定は、今後のアプリ開発において重要なポイントです。Ionic 8での変更点を把握して、アプリのテーマカラーとダークモードの設定を見直してみてはいかがでしょうか。

それではまた。