SwiftUI Dark Mode: 완전 구현 가이드

Source: Dev.to

현재 색 구성표 감지

SwiftUI는 @Environment(\.colorScheme)을 제공하여 앱이 라이트 모드인지 다크 모드인지 감지할 수 있습니다.

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Hello")
            .foregroundColor(colorScheme == .dark ? .white : .black)
    }
}

적응형 색상 사용

색 구성표를 직접 확인하는 대신 SwiftUI의 내장 적응형 색상에 의존할 수 있습니다.

Text("Adapts automatically")
    .foregroundColor(.primary)                     // 라이트에서는 검정, 다크에서는 흰색
    .background(Color(.systemBackground))        // 라이트에서는 흰색, 다크에서는 검정색

주요 의미 색상

• .primary / .secondary – 자동으로 적응하는 텍스트 색상.
• Color(.systemBackground) – 기본 배경 색상.
• Color(.secondarySystemBackground) – 그룹화된 콘텐츠용 배경 색상.

커스텀 테마 만들기

색상을 완전히 제어하려면 테마 구조체를 정의합니다.

struct AppTheme {
    let background: Color
    let text: Color
    let accent: Color

    static let light = AppTheme(
        background: .white,
        text: .black,
        accent: .blue
    )

    static let dark = AppTheme(
        background: Color(.systemGray6),
        text: .white,
        accent: .cyan
    )
}

환경을 통해 테마 제공

EnvironmentKey를 정의하고 EnvironmentValues를 확장하여 현재 테마를 저장합니다.

struct ThemeKey: EnvironmentKey {
    static let defaultValue = AppTheme.light
}

extension EnvironmentValues {
    var theme: AppTheme {
        get { self[ThemeKey.self] }
        set { self[ThemeKey.self] = newValue }
    }
}

두 모드 모두 미리 보기

라이트와 다크 모양 모두에서 UI를 항상 테스트하세요.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .preferredColorScheme(.light)

            ContentView()
                .preferredColorScheme(.dark)
        }
    }
}

흔히 발생하는 실수

• 색상을 하드코딩 – 자동으로 적응하는 의미 색상(.primary, .secondary, 시스템 배경 색상)을 사용하세요.
• 이미지 에셋 누락 – 다크 모드용 변형을 제공하거나 기본적으로 적응하는 SF Symbols를 사용하세요.
• 미리 보기 생략 – 시각적 문제를 조기에 발견하려면 라이트와 다크 스키마를 모두 미리 보기하세요.