[iOS] 다크 모드에서 cgColor 적용하기

안녕하세요 코찐입니다.

이번에는 다크모드에서 cgColor 적용하는 이슈를 정리해보겠습니다.

 

iOS는 UITraitCollection를 통해서 적절한 컬러를 적용하게 되는데요.

https://developer.apple.com/videos/play/wwdc2019/214/ 에서 내용을 소개하고 있습니다.

https://eunjin3786.tistory.com/301 이 글에서 WWDC 내용을 잘 정리해주고 있습니다!

 

간단한 예제를 통해 알아보겠습니다.

MainColor라는 컬러셋을 만들었습니다.

 

뷰의 테두리를 그리거나 그림자를 넣을 때 등을 위해서 CGColor를 사용합니다.

cgColor는 dynamic color를 지원하지 않아서, UITraitCollection를 먼저 반영해서 cgColor로 뽑아줘야 합니다.

 

https://developer.apple.com/documentation/uikit/uicolor/3238042-resolvedcolor

let color = UIColor(named: "MainColor")!
let resolvedColor = color.resolvedColor(with: traitCollection)
view.layer.borderColor = resolvedColor.cgColor

 

이런 식으로 ViewController의 UITraitCollection을 반영한 resolvedColor를 가져올 수 있습니다.

이걸 통해서 레이어에 적용하면 다크모드에 알맞는 컬러를 사용할 수 있습니다.

 

그리고 앱이 켜진 후에 설정에서 다크모드를 동적으로 변경할 경우를 대비해서

viewWillLayoutSubviews 에 코드를 넣어주면 좋습니다.

 

실습 코드

class ViewController: UIViewController {

    private lazy var boderView = UIView(
        frame: CGRect(
            x: 100,
            y: 100,
            width: 100,
            height: 100
        )
    )
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(boderView)
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        let color = UIColor(named: "MainColor")!
        let resolvedColor = color.resolvedColor(with: traitCollection)
        boderView.layer.borderColor = resolvedColor.cgColor
        boderView.layer.borderWidth = 1.0
    }

}

 

적용된 모습