[SwiftUI] 결국 Assets으로 색상 변수 관리 하기 + 다크모드 도입

 

 

 

 

개인적으로 다크모드를 사랑하는 1인으로써 앱을 만들다보니 당연히 다크모드 도입을 하게됐다.

SwiftUI에서 다크모드는 어떻게 하는 것일까?

 

방법은 두가지다.

1. Assets 기반 시스템 대응

2. 코드 기반으로 라이트/다크를 분기 처리

 

나의 경우 이미 '전역 포인트 색상 변수 선언하기'를 통해 코드로 관리하고 있기 때문에 2번으로 진행하려고 했다.

하지만 다크모드를 감지하기 위해 모든 view 파일에 @Environment(\.colorScheme) var colorScheme 코드를 삽입해야 했다.

비효율적이고 새로운 View 파일을 생성한 뒤 잊어버리면 다크모드가 안되는 이슈가 있기 때문에 1번으로 하기로 했다.

 

그러기 위해선 두가지 작업이 필요하다.

1. Assets에 New Color Set 추가

2. 기존 코드 혹은 파일 삭제

 

그럼 바로 첫번째 작업을 해보도록 하자.

 

 

1. Assets에 컬러 추가

Assets 파일 클릭 > 우클릭 > New Color Set 생성해준 다음 각각 이름(=pointColor, backgroundColor 등)을 지어준다.

 

그럼 인제 색상을 다크모드까지 대비해 넣어주면 되는데 둘 중 하나를 눌러도 색상 선택 창이 보이지 않다면 

View> Inspectors > Show Attributes Inspector 클릭하면 된다.

나타났다면 Input Method을 8-bit Hexadecimal로 변경한다.

Hex에 원하는 색상으로 변경하면 된다.

 

색상이 바로 눈에 보이니 좋다.

 

 

2. 기존 코드 혹은 파일 삭제?

물음표를 붙인 이유는 Assets을 사용할 경우 기존에 만들어두었던 Color+Extension 파일을 삭제해야 한다고 생각했다.

하지만 자동완성과 오타방지를 위해 실무에서도 Color+Extension 파일로 관리한다고 한다. 

 

// Extension 유지 시
Text("목표")
    .foregroundColor(.pointColor)
    .background(.backgroundColor)

// Extension 제거 시
Text("목표")
    .foregroundColor(Color("pointColor"))
    .background(Color("backgroundColor"))

또한 Extension 제거 시 Color("x")로 변경해야한다. 

저렇게 하나하나 또 변경해줘야 한다니...

 

곰곰이 생각해본 결과 Color+Extension 파일을 삭제하지 않기로 했다. 

 

import SwiftUI

extension Color {
    static let pointColor = Color("pointColor")
    static let secondColor = Color("secondColor")
    static let backgroundColor = Color("backgroundColor")
}

그래도 자잘하게 Color+Extension 파일에 코드를 수정하고 추가해줬다.

바뀐 점은 기존에 Color(hex: "#F6F7EE")로 정의한 걸 Color("secondColor")으로 수정했다.

또한 추가해준 backgroundColor을 넣어줬다. 

 

인제 각 View 마다 background 컬러만 바꾸주면 된다.

검색창에 Color.white라고 치니 5곳이 나왔다.

다국어 설정할 때도 그랬지만 새로운 앱을 만나게 되면 꼭 초반부터 다국어와 색상 관리는 미리 해둘 것이다.

 

// 변경 전
.background(Color.white)

// 변경 후
.background(Color.backgroundColor)

다짐은 뒤로 하고 background 코드를 모두 변경한 다음 빌드를 해준다.

설정 > 개발자 > 다크 화면 모드로 해줘서 앱에 들어가 잘 되는지 체크!

 

 

굳