IzumoはDark Modeに対応しました。

( macOS )

IzumoはDark Modeを対応しました。

作業

基本的に動画やドキュメントを見ればある程度のことはできるようになります。 まずは、アプリで利用するカラーをAssetsで利用してそこからダークモードとそうでないものに切り分けして設定してしまえば、自動的に判別してモードに適した色を設定してくれます。

あとは何かしらのタイミングでUIが変更され、再度描画が必要な場合は以下のタイミングを利用してアップデートかければよくなります。

  • updateConstraints
  • layout
  • draw(_ dirtyRect: NSRect)
  • updateLayer

気に食わなかったところ

NSScrollerのデザインがDark Modeにした時に自分が納得のいく十分なデザインではなかったのでカスタマイズしました。 （背景色が全体の黒に馴染まないような灰色だったのでカスタマイズした。）

実装はNSScrollerを継承時して独自のクラスを作成してあげれば期待した通りのデザインになる。

import Cocoa

class NoteListVerticalScroller: NSScroller {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
    }

    override func drawKnobSlot(in slotRect: NSRect, highlight flag: Bool) {
        super.drawKnobSlot(in: slotRect, highlight: flag)

        // 背景はリストの背景と同じにする
        NSColor.defaultBackgroundColor.set()
        slotRect.fill()

        // 同じにすると境界がわからなくなるのでボーダー独自に描くようにする
        NSColor.defaultScrollerLeft.set()
        let rect = CGRect(x: 0, y: 0, width: 1, height: slotRect.height)
        rect.fill()
    }
}

class NoteListScrollView: NSScrollView {
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        verticalScroller = NoteListVerticalScroller(frame: verticalScroller!.frame)
    }
}

まとめ

Darkは正義

とにかくかっこいいし、メモして快適なので我ながら対応してよかった。

Reference