(Swift) DarkMode Custom Color, Image 대응

• Swift 5, Xcode 11.3.1 기준, iOS 10 이상 대응 기준

iOS 13 으로 넘어오면서 DarkMode 라는 기능이 생겼죠. 사용자 기기의 환경에 따라 LightMode, DarkMode Color, Image 를 맞춰서 작업하는 방법을 공유합니다. 😃

구글링 하다보면 쉽게 DarkMode 대응 방법을 알 수 있는데, iOS 10 버전 부터 대응할 경우 발생하는 문제가 있어요. 그 부분을 확인하고 대응하는 코드에 대해 알아보겠습니다. 🧐

모든 코드는 글 하단 GitHub 주소로 들어가면 확인할 수 있어요.

Mode별 Set 만들기

우선 Light와 Dark Mode 별로 Color, Image Set을 만들어요.

New Image Set, New Color Set

우측 인스펙터 영역에서 Appearances 쪽에 Any, Dark 옵션을 선택합니다.

그럼 아래와 같이 Light와 Dark 를 따로 넣을 수 있게 바뀌어요.

Created by icons.design from Noun Project

위 이미지는 출처에서 무료로 다운받아 포토샵으로 일부 수정한 아이콘 이미지입니다. icon 출처 : https://thenounproject.com/search/?q=pencil&i=22414

버튼 이미지와 같이 Mode별 지원이 필요한 이미지를 여기에 넣으면 되겠죠? 위에 Light Mode 이미지를, 아래에 Dark Mode 이미지를 넣으면 돼요.

Color Set도 마찬가지예요. Color의 경우 인스펙터 창에 Input Method 라는 옵션이 있는데 여기서 RGB로 할건지, Hex 값으로 할건지 선택할 수 있어요. 저는 Hex값이 더 익숙해서 그걸로 해볼게요.

이제 코드를 작성할 차례예요.

Code 작성

Assets 에서 만들었던 Image와 Color Set 는 아래의 코드처럼 사용하면 되는데,

view.backgroundColor = UIColor(named: "backgroundColor")
button.setImage(Image Literal, for: .normal)

코드를 작성하면 Color를 지정한 부분에서 아래처럼 에러가 뜰거예요.

Build Target을 iOS10 이상으로 맞췄는데, iOS11 부터 지원되는 코드라고 하네요. iOS10은 LightMode 밖에 없는데, 그래서 Light Color 값을 iOS10 에서 따로 지정하는 코드로 이 문제를 해결할거예요.

우선 iOS11 부터 사용 가능한 코드에서도 String 값을 입력하려고 하면 실수가 생기고 번거로우니 enum 값으로 Color 값들을 구분할거예요.

Public enum Color: String {
  case background = "backgroundColor"
  case text = "textColor"
}

그 후 iOS10, iOS11 이상을 모두 만족하는 Extension 코드를 추가해요.

extension UIColor {
  static func colorSet(_ colorRawValue: Color) -> UIColor {
    var color: UIColor = .black
    if #available(iOS 11, *) {
        color = UIColor(named: colorRawValue.rawValue)!
      } else {
        switch colorRawValue {
        case .background:
          color = UIColor(red: 244, green: 241, blue: 238, alpha: 1)
        case .text:
          color = UIColor(red: 19, green: 51, blue: 55, alpha: 1)
        }
      }
    return color
  }
}

UIColor를 반환해주는 함수인데, iOS11 이상일 경우 Assets 의 ColorSet 을 이용하고, iOS10 일 경우 color 값을 RGB로 따로 지정해줬어요. iOS10은 Light Mode만 있으니 ColorSet 에서 Any 의 Color를 가져오면 되겠죠.

// 기존 코드
view.backgroundColor = UIColor(named: "backgroundColor")

// extension 함수를 사용한 코드
view.backgroundColor = UIColor.colorSet(.background)

Conclusion

iOS10 점유율은 거의 되지 않기 때문에 iOS10 까지 대응할 필요가 있을까 싶긴 하지만 그래도 아직 남아있는 iOS10 유저를 잡으면서, Dark Mode를 대응한다면 유용한 방법이 될거라고 생각해요.

참고로 iOS 13 이상의 Simulator에서 Dark Mode 변경은 설정 > 개발자(Developer) 에서 변경할 수 있어요.

GitHub: https://github.com/hanulyun/DarkModeDemo