[iOS] 다크모드 대응하기

다크모드

• 다크모드는 iOS 13.0 업데이트에 등장했다.
• 지금은 프로젝트를 생성하면 다크모드를 지원하는게 기본 설정이다.
• 다크모드 지원여부는 개발자가 프로젝트 설정에서 선택할 수 있다.
• 프로젝트에서 다크모드를 잘 대응하기 위해선 라이트모드와 다크모드에서 각각 사용될 수 있도록 색상, 이미지, 아이콘등 요소에 관리가 필요하다.
• UIColor중 system이 붙은 색상들은 다크모드를 자동으로 지원한다. SystemBackgroundColor는 라이트모드에서 흰색, 다크모드에서 검정색으로 표현된다.

 

1. ColorAssets으로 대응

Color Assets을 추가할 때 Appearance에서 None이 아닌 Any, Dark를 선택해준다.

다크모드일 경우 Dark에 설정한 색이 표시된다.

light모드일 경우 Any에 지정한 색이 표시된다.

 

이렇게 추가한 Color Assets은 Image Assets과 동일하게 programmatically하게 사용 가능하다.

 

extesnion으로 UIColor에 상수를 추가할 수 있다.

같은 방식으로 이미지에 대해서도 다크모드 적용이 가능하다.

 

 

2. UIColor extension으로 대응

 

먼저 UITraitEnvironment에 대해 알아보자

iOS Interface environment를 앱에서 사용할 수 있도록 하는 프로토콜이다.

 

UITraitEnvironment는 다음 링크에서 더욱 자세히 설명합니다.

https://clamp-coding.tistory.com/490

[iOS] UITraitEnvironment

 

iOS Interface environment에는 다음과 같은 trait들이 포함된다.

• horizontal / vertical size class
• dispaly scale
• user interface idiom
• user interface style

user interface style 라이트모드 / 다크모드가 앱에서 필요하다.

 

trait environment에 접근하기 위해서는 UITraitCollection 클래스의 trait Collections프로퍼티를 사용해야한다.

extension UIColor {
    static var defaultColor: UIColor {
        if #available(iOS 13, *) {
            return UIColor { (traitCollection: UITraitCollection) -> UIColor in
                if traitCollection.userInterfaceStyle == .light {
                    return .white
                } else {
                    return .black
                }
            }
        } else {
            return .white
        }
    }
}

// 사용
// textLabel.textColor = .defaultColor