seong_hye, the developer

Swift) DarkMode 활용하기(ColorScheme) 본문

IOS/SwiftUI

Swift) DarkMode 활용하기(ColorScheme)

seong_hye 2022. 11. 3.

 

📘 DarkMode

Swift에서는 iOS 13이상에서는 기본적으로 시스템 다크모드에 따라 UI가 자동으로 반응함시스템 색상을 사용하면 라이트/다크 모드에 따라 색상이 변경됨

시스템 색상 라이트 모드 다크 모드
.systemBackground 흰색 검정
.label 검정 흰색
.secondaryLabel 회색 연회색
.systemGray 중간 회색 중간 회색 (어두움)

 

➡️시스템 색상 적용 방법

Text("자동 색상 대응")
	.background(Color(.background))
    .foregroundColor(Color(.primary))

🔹 ColorScheme

SwiftUI에서 현재의 색상 모드 ( = 다크모드 / 라이트모드)를 나타내는 열거형(enum)

다크 모드 대응 UI를 만들 떄 핵심적으로 사용되는 환경 값

 

ColorScheme 정의

enum ColorScheme {
	case light
    case dark
}

 

사용 예시

struct ContentView: View {
	@Environment(\.colorScheme) var colorScheme
    
    var body: some View {
    	Text(colorScheme == .dark ? "다크 모드" : "라이트 모드")
        	.padding()
            .background(colorScheme == .dark ? Color.black : Color.white)
            .foregroundColor(colorScheme == .dark ? Color.white : Color.black)
    }
}

🔹 다크모드 or 라이트 모드 강제 적용

preferredColorScheme(_:) 수정자를 사용해 강제 적용할 수 있음

✅ 뷰 단위에서 강제 적용

struct COntentView: View {
	var body: some View {
    	Text("강제로 다크 모드 적용 중")
        	.padding()
            .preferredColorScheme(.dark)
    }
}

.dark: 강제로 다크 모드

.light: 강제로 라이트 모드

.none: 시스템 설정에 따름

 

✅앱 전체에 강제 적용

preferredColorScheme을 최상위 WindowGroup이나 Scene에 적용하면 앱 전체에 영향을 줌

@main
struct TestApp: App {
	var body: some Scene {
    	WindowGroup {
        	ContentView()
            	.preferredColorScheme(.dark)
        }
    }
}

 

Comments