[SwiftUI] 다크모드 대응 ColorScheme

향상된 사용자 경험을 제공하기 위해서 다크 모드에 대해 적절한 대응을 해야 한다.

SwiftUI를 통해 프로젝트를 진행하면서 다크 모드에 대응하는 방법을 알아볼까 한다.

 

생각보다 엄청 단순했다.

바로 ColorScheme를 이용하는 방법이다.

colorScheme | Apple Developer Documentation

colorScheme | Apple Developer Documentation

 

ColorScheme는 화면 모드에 관련된 환경 변수이다.

이를 통해 현재 컬러스킴값을 가져오는 것은 물론 뷰의 환경값이 변경되면 이를 감지하여 뷰에 반영을 해준다.

이를 통해 한번 뷰를 간단하게 구현해 보겠다.

 

import SwiftUI

struct SecondView: View {
    @Environment(\\.colorScheme) var scheme
    var body: some View {
        Text("Hello, World!")
            .font(.title)
            .foregroundStyle(scheme == .light ? Color.red : Color.green)
            .padding()
        Text("Color Extension")
            .font(.title)
            .foregroundStyle(Color.textColor1(scheme: scheme))
    }
}

#Preview {
    SecondView()
}

extension Color {
    static func textColor1(scheme: ColorScheme) -> Color {
        switch scheme {
        case .light:
            return .red
        case .dark:
            return .green
        @unknown default:
            return .red
        }
    }
}

1. 첫 번째 텍스트 단순히 foregroundStyle에서 바로 스킴값을 비교하여 알맞은 컬러를 반환하였다.
2. 두 번째 텍스트 익스텐션을 이용하여 스킴값을 넣어주면 그에 알맞은 색상을 반환하는 함수를 만들어 조금 더 간결하게 표현해 보았다.

Assets Color

단순히 작성하느라 기본 컬러 코드로 예제를 작성하였지만 에셋에 컬러 셋을 추가하는 경우에는

라이트모드에서 사용할 색상을 Any Appearance에, 다크모드에서 지원할 색상을 Dark에 정의한 뒤

똑같이 뷰 상단에 ColorScheme 환경 변수 선언 후

간단히. foregroundStyle(Color(”에셋 네임”))만 사용하면 손쉽게 사용할 수 있다.