🎨

UIColorを階層構造によって変化させる

2023/04/20に公開

UIColor.systemBackgroundを設定すると、モーダルの階層によって色が変わります。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
    }
}

次のスクリーンショットは、背景色をsystemBackgroundに設定したViewControllerと、同じものをモーダル表示で遷移したものです。

遷移前 遷移後

この挙動を自作するには、userInterfaceLevelを参照します。
モーダル表示されたViewControllerでは、elevatedになります。

extension UIColor {
    static var appBackground: UIColor = UIColor { traitCollection in
        switch traitCollection.userInterfaceLevel {
        case .base:
            return .orange
        case .elevated:
            return .red
        }
    }
}
...

view.backgroundColor = .appBackground
遷移前 遷移後

Discussion