[MacOS] アイコンのダークモード対応方法

SwiftUI を使っていると、大半は、自動でダークモード対応されるのですが、アイコンは、自分で用意しないといけません。
忘れると、AppReview で Reject される理由になり得るので、対応することは、重要です。




Image Resource

アイコンに限らず、イメージは、必要に応じて、ライトモード・ダークモード を用意する必要があります。

今回は、Assets.xcassets に保持しているアイコンについて、ライトモード・ダークモードをサポートする方法を説明します。

Attribute Inspector

リソースでイメージ等を追加すると、右側のペーンに、Attribute Inspector が表示されると思いますが、そこでの設定がポイントとなります。

AttributePane

Option(⌥) + Command(⌘) + 4 でも表示することができます。

Appearance

Attribute Inspector の中で設定できる Appearance が今回のポイントとなる設定です。

以下のように、デフォルトでは、”None” となっていると思います。

AppearanceNone

ここの値を、”Any, Light, Dark” とすることで、以下のように、Light, Dark 両モード用のイメージも保持できるようになります。

AppearanceAnyLightDark

Light は、ライトモード時に使われるイメージ、Dark は、ダークモード時に使われるイメージ、Any は、過去バージョンとの互換用です。

実装例

以下は、ライトモード、ダークモード対応のアイコンを追加したケースです。

ダークモードでは、背景は黒くなるので、文字色を白くしています。

AppearanceExample
アイコン以外のダークモード対応は、Apple のこちらのドキュメントが参考になります。

説明は、以上です。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です