Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Dark Mode 対応で抑えておくところ

More than 1 year has passed since last update.

Mojave で搭載された「Dark Mode」の対応について、抑えておくところのメモです。

デザインで抑えておくところ

  • Dark Mode と Light Mode それぞれの配色を考える必要がある
  • 複雑な配色のアセットを避けるのも一つ
    • デザインアセットが増えると管理コストも増えるので、一つのアセットをプログラムでその配色に塗るようにするのもよいかも
  • Human Interface Guideline で例に上がっている「アセットを別々のものにする必要がある」例
    • Light Mode 時インナーシャドウで表現しているところは、Dark Mode 時インナーグローで表現するようにする
      • Dark Mode でインナーシャドウが使われていると、そのアセットがダークな背景に溶けてしまう
    • HIG で解説されているので、詳しくは要チェック
  • 消極的解決法:アプリに「Dark Mode をサポートしない」という設定ができるので一旦はこれでしのぐ

実装で抑えておくところ

画像を Dark Mode と Light Mode で切り替える

Assets.xcassets で管理する画像について、 「Appearance」 を Any, Dark に設定して、それぞれのスロットに画像をアサインする(Dark Appearance = Dark Mode 用、Any Appearance = いまのところ Light Mode 用)。

スクリーンショット 2019-06-03 3.28.33.png

現在の外観モード(Dark Mode かどうか)を確認する

let appearanceName = NSApplication.shared.effectiveAppearance.name

switch appearanceName {
case .aqua:
    print("Light Mode")
    label.textColor = NSColor.red
case .darkAqua:
    print("Dark Mode")
    label.textColor = NSColor.blue
default:
    assertionFailure()
}

コードで切り替える場合は外観モードを確認した上で適用していきます。

外観モードが変更されたことを検知する

NSView.viewDidChangeEffectiveAppearance() を override します。

override func viewDidChangeEffectiveAppearance() {
    print(NSApplication.shared.effectiveAppearance.name)
}

macOS の設定画面で「外観モード」を変更すると、アプリでの表示も切り替わることを確認できます。

スクリーンショット 2019-06-03 3.45.51.png

消極的解決法:外観モードをライトのみサポートする

NSApplication.shared.appearance = NSAppearance(named: .aqua)

OS で Dark Mode に設定していても、アプリは Light Mode な感じで表示されます。
OS が Dark Mode に設定してある場合、このコードが実行されてから画面に反映されるまで一瞬 Dark Mode で表示されてしまうので、バグっているように見せてしまうかも…。

サンプル

こちらに上記を試せるサンプルコード載せておきましたー
https://github.com/feb19/DarkModeSampleApp-macOS

読んでおくと良さそうなリソース

feb19
Designer / Engineer http://feb19.jp
http://feb19.jp/blog
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away