[ios][swift][dark mode 다크모드 지원]

ios 13부터 dark mode를 지원하기 시작했다

그래서 앱 역시 dakr mode 지원을 고려해야 한다.

폰에서 다크 모드 설정하는 방법은 다음과 같다.

https://support.apple.com/ko-kr/HT210332

iPhone, iPad 또는 iPod touch에서 다크 모드 사용하기

 

애플은 다크 모드를 지원하면서 기본색에 대해서는 라이트모드 / 다크모드에서 사용될 색을 정의하고 개발자가 시스템 색을 사용할 경우 화면 모드에 따라서 다른 색을 보여주도록 지원하고 있다. 이것을 Semantic Color라 한다.

예. system Blue를 사용할 경우 다음과 같이 각각 다른 색이 표현되게 된다.

더 많은 색에 대한 정의는 다음 페이지를 참고하면 된다.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer

 

1. Assets를 이용해서 다크 모드 지원하기

1-1. 모드 별로 다른 색을 정의 하기

assets에 "Color Set"를 추가하고 라이트 모드와 다크모드에서 사용할 색을 정의한다.

Appearance는 Any, Light, Dark로 나눠지는데 그 정의에 따라서 표현되는 색이 변경된다.

사용하는 방법은 다음과 같다.

assets에 정의한 색이름을 코드상에서 사용해서 UIColor를 생성한다.

1-2. 모드 별로 다른 이미지를 정의 하기

Color set과 동일하게 이미지 역시 Any, light, dark Appearance에 맞춰서 이미지를 추가해주면 app은 해당 모드에 맞는 이미지를 보여주게 된다.

any 에서는 빨강색 차가 보여질 것이고, dark 에서는 파랑색 차가 보여지게 된다.

만일 라이트 모드와 다크모드에서의 이미지를 동일하고 색으로만 구별한다고 한다면?

이미지 속성중 "Render As"를 "Template Image"로 바꾸고 

다음과 같이 코드를 추가한다면 라이트/다크모드에 따라서 이미지는 동일하고 tintColor로 다르게 보여질수 있다.

 

2. 현재 앱의 다크 모드 여부를 확인해서 코드로 지원하기

UITraitCollection.userInterfaceStyle를 이용해서 현재 어떤 모드인지를 알 수 있고 그 모드에 따른 색을 반환하는 예제 함수이다.

이런 식으로 view가 load 되는 시점 혹은 appear 되는 시점에 동적으로 이미지 혹은 색을 변경해줄 수 있다.

 

덧> 만일 앱이 다크모드를 지원하지 않고 항상 동일하게 보여지게 하고 싶다면 다음과 같이 처리하면 된다.

info.plist에서 appearance를 "Light"로 명시하면 된다.