iOS 18のダークモードでアプリアイコンの色が反転する条件を検証してみた

iOS 18ではホーム画面のカスタマイズが可能になり、これまでの「ライトモード」に加えて「ダークモード」や「色合い調整」などの新しいモードが追加された。

特に「ダークモード」と「色合い調整」では、アプリ側で特別な設定をしなくても、OSが自動的にアイコンの色を反転させる場合がある。ただ、アプリによっては反転しないものもあり、反転が行われる条件が明確ではない。

そこで、いくつかのアプリアイコンを使い、ダークモード時に色が反転する条件を検証した。結論として、シンプルなアイコンで前景と背景がはっきりと分かれており、かつ背景の色の変化が少ない場合に、自動的に色の反転が行われることが確認できた。

本記事ではアイコンの背景色が反転することを「色の反転」と表現している。

検証環境

今回の検証は、以下の環境で行った。

• Xcode 15.2 / Xcode 16.0
• iOS 18.0シミュレータ (22A3351) / iOS 18.0 Release (22A3354)

XcodeやiOSのバージョンによる挙動の違いも調査したが、色の反転には特に影響は見られなかった。

今回は以下の2種類のアプリアイコンを使って検証した。

背景ベタ塗り	背景グラデ

アイコンの設定は Single Size を選択し、下図のように設定した。

背景がベタ塗りの場合

まずは背景がベタ塗りのアイコンを確認しよう。

検証結果として、ベタ塗りのアイコンはダークモードにすると自動的に色の反転が行われ、背景が濃い緑色・前景が白色のアイコンは、ダークモードでは背景が黒色・前景が緑色に反転した。

ライトモード	ダークモード	色合い調整

背景がグラデーションの場合

次に、背景にグラデーションがかかったアイコンを確認した。一見、ベタ塗りのアイコンと大きな違いはないが、背景の緑色に少しだけグラデーションがかかっている。

グラデーションがかかっているアイコンでは、ダークモードにした際、アイコンが少し暗くなるだけで、色の反転は行われなかった。ただし、「色合い調整」機能を使って任意の色を設定した場合には、ベタ塗りのアイコンと同様に反転することが確認できた。

ライトモード	ダークモード	色合い調整

まとめ

今回の検証では、一部の条件が不明確ではあるものの、アイコンのデザインによって、ダークモードでの色の反転が自動的に行われるかどうかが決まることがわかった。

ベタ塗りのアイコンはダークモードにすると自動で反転したが、グラデーションを含むアイコンでは反転せず、少し暗くなるだけだった。この挙動はAppearancesオプションを使って細かく制御できる。

特に、ダークモードやカスタムカラー設定に応じてアイコンデザインを意図的に変更したい場合は、Any, Dark, Tintedの設定を適切に使用して、それぞれのモードに合わせたアイコンを提供する必要がある。詳細については「アプリアイコン | Apple Developer Documentation」を確認して欲しい。

https://developer.apple.com/jp/design/human-interface-guidelines/app-icons