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

Image Resource

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

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

Attribute Inspector

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

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

Appearance

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

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

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

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

実装例

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

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

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

説明は、以上です。

関連記事:

[CoreData] Transformable な Attribute の使い方 [SwiftUI] Darkモードを無視する [SwiftUI] ColorSet を使った Dark-mode 対応 [SwiftUI] SwiftUIとMusicKit/MediaPlayerFrameworkを使った音楽再生アプリの作り方