42. [SwiftUI] 다크모드, 적응형 컬러

iOS 13부터 추가된 다크모드로 인해 컬러에 대해 조금 더 신경써야 할 필요가 생겼다.

(나는 다크모드를 매우 선호한다.)

 

라이트모드, 다크모드에 상관 없이 항상 동일한 색을 보여줄 것인가?

아니면 모드에 따라 다른 색을 보여줄 것인가? 등을 고려하기 위해 알아야 하는 것들을 정리해 보자.

 

예시를 보면 Primary, Secondary는 라이트/다크모드 설정에 따라 화이트/블랙이 바뀌는 것을 알 수 있다.(네비게이선 타이틀도 마찬가지)

 

다만 Black, white, red는 라이트/다크모드 상관 없이 항상 각자의 색으로 보인다.

 

또한 Globally adaptive, Locally adaptive는 라이트/다크모드 설정에 따라 다른 색을 보이고 있다.

 

코드를 통해 자세히 살펴보자.

 

//  Created by Toughie on 2023/05/01.
//

import SwiftUI

struct DarkModePrac: View {
    
    //활성화 된 시스템 테마
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        
        NavigationView {
            ScrollView {
                VStack(spacing: 20) {
                    
                    //적응형
                    Text("PRIMARY")
                        .foregroundColor(.primary)
                        .padding(.top, 20)
                    //적응형
                    Text("SECONDARY")
                        .foregroundColor(.secondary)
                        
                    Text("Black")
                        .foregroundColor(.black)
                    Text("White")
                        .foregroundColor(.white)
                    Text("Red")
                        .foregroundColor(.red)
                    
                    //전역 적응형
                    Text("Globally adaptive")
                        .foregroundColor(Color("AdaptiveColor"))
                        
                    //지역 적응형
                    Text("Locally adaptive")
                        .foregroundColor(colorScheme == .light ? .green : .pink)
                }
            }
            .navigationTitle("DARKMODE")
        }
    }
}

struct DarkModePrac_Previews: PreviewProvider {
    static var previews: some View {
        
        Group {
            DarkModePrac()
                .preferredColorScheme(.light)
            DarkModePrac()
                .preferredColorScheme(.dark)
        }
    }
}

 

@Environment(\.colorScheme) var colorScheme

- colorScheme은 현재 활성화된 시스템 테마(라이트/다크)를 나타내는 SwiftUI의 속성

해당 값을 기반으로 앱의 테마와 UI를 업데이트 할 수 있음.

 

Global adaptive color

- Color.primary, Color.secondary와 같은 전역 색상은 환경 설정에 따라 자동으로 변경됨.

이 색상은 앱의 모든 뷰에서 일관되게 사용된다. (개별 뷰에 대한 코드 작성 불필요)

 

Local adaptive color

- .foregroundColor 등 특정 뷰의 색상을 제어

지역 적응형 컬러를 사용하면 개별 뷰마다 적절한 색상 선택 가능.

 

+ 커스텀 컬러 적응형으로 사용하기

                    Text("Globally adaptive")
                        .foregroundColor(Color("AdaptiveColor"))

에셋에 커스텀 컬러셋을 추가하고 라이트/다크 모드에 따라 표시할 색을 선택할 수 있다.