[Udemy iOS & Swift Bootcamp] Supporting Dark Mode

Dark Mode ?

최근 Dark Mode를 지원하는 앱이 많아지고 있다.

Dark Mode란 System Mode의 Light, Dark 설정에 따라 앱도 밝고, 어두운 화면을 지원하는 기능이다.

그리고 Xcode 에서는 이를 쉽게 지정할 수 있다.

 

맨 아래 Appearance 버튼을 누르면 Light, Dark 모드 확인 가능

---

1. Label Color 이용하기

Label 컬러로 지정해주면 자동으로 System 모드에 맞춰서 하얀색, 검은색으로 변경된다.

 

2. Label Color 컬러 말고 Custom 컬러를 Light, Dark Color로 저장하는 법

1) Custom 컬러를 팔렛트에 저장하기

임의의 Light, Dark컬러를 지정하려면 원하는 컬러를 팔레트에 저장해두면 적용하기 편하다.

원하는 컬러를 스포이드로 추출하고, 컬러를 드래그해서 오르쪽 팔레트에 옮기면 된다.

 

2) 새로운 Color Set의 Light, Dark 컬러로 지정하기

오른쪽 Name에 이름부여하기

 

3) Light에 Custom 컬러 지정하기

 

4) 특정 객체에 부여하고 확인해보기

Light 모드일 때

Dark 모드일 때

Light 모드일 때는 어두운색, Dark 모드일 땐 밝은색으로 변경되는 것을 확인할 수 있다.

 

3. System 모드에 따라 배경이미지 바꾸기(깨지지 않는)

1) 벡터 파일로 교체하기 

벡터이미지를 확대한 모습

일반 png파일은 확대하면 깨지는 문제가 있다. 이를 해결하기 위해서는 vector이미지를 사용하면 된다.

Assets > Background로 이동해서 Resizing을 Preserve Vector Data, Scales를 Single Scale 로 변경한다. 그럼 확대해도 깨지지 않는 배경 이미지를 얻을 수 있다.

 

2) Light, Dark 배경선택하기

Appearances를 Any, Light, Dark로 변경하고 배경 추가하기

 

3) Main보드에서 모드 바꿔가면서 확인해보기