SwiftUI检测浅色或深色模式

在 SwiftUI 中，colorScheme 是一个环境值，用于指示当前界面是使用浅色模式还是深色模式。可以通过这个值动态调整视图的样式或行为。

什么是 colorScheme

colorScheme 是一个枚举类型 ColorScheme，包含以下两种值：

.light：浅色模式

.dark：深色模式

如何检测当前的 colorScheme

可以通过 @Environment 属性获取当前的 colorScheme 值：

import SwiftUI

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

    var body: some View {
        VStack {
            Text("Current Color Scheme:")
                .font(.headline)
            Text(colorScheme == .light ? "Light Mode" : "Dark Mode")
                .foregroundColor(colorScheme == .light ? .black : .white)
        }
        .padding()
        .background(colorScheme == .light ? Color.white : Color.black)
    }
}

@Environment(\.colorScheme) 自动读取当前的系统或父视图的配色方案。

根据 colorScheme 的值动态调整文本和背景的颜色。

如何强制使用特定的 colorScheme

可以通过视图的 .preferredColorScheme(_:) 修饰符设置强制的颜色模式。

示例：

struct ContentView: View {
    var body: some View {
        Text("This View Always in Light Mode")
            .padding()
            .background(Color.white)
            .foregroundColor(Color.black)
            .preferredColorScheme(.light)
    }
}

.preferredColorScheme(.light) 强制视图在浅色模式下显示。

类似地，使用 .preferredColorScheme(.dark) 可以强制深色模式。

动态切换 colorScheme

如果需要在应用内动态切换浅色和深色模式，可以结合 @State 和 .preferredColorScheme。

示例：

struct ContentView: View {
    @State private var isDarkMode = false

    var body: some View {
        VStack {
            Toggle("Dark Mode", isOn: $isDarkMode)
                .padding()
            Text("Hello, SwiftUI!")
                .padding()
                .background(isDarkMode ? Color.black : Color.white)
                .foregroundColor(isDarkMode ? .white : .black)
        }
        .preferredColorScheme(isDarkMode ? .dark : .light)
    }
}

在整个应用中设置 colorScheme

如果希望应用的所有视图都遵循某种颜色模式，可以在 Scene 中设置：

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .preferredColorScheme(.dark) // 强制整个应用为深色模式
        }
    }
}

动态适配不同的颜色模式

在某些情况下，可以针对不同的模式提供不同的样式，比如图片、背景颜色等：

示例：

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

    var body: some View {
        VStack {
            Image(systemName: "sun.max")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(colorScheme == .light ? .yellow : .gray)
            
            Text("SwiftUI Color Scheme")
                .padding()
                .background(colorScheme == .light ? Color.white : Color.black)
                .foregroundColor(colorScheme == .light ? .black : .white)
        }
        .padding()
    }
}

总结

使用 @Environment(\.colorScheme) 读取当前配色方案。

用 .preferredColorScheme(_:) 强制视图使用特定配色方案。

根据模式动态适配 UI，可以显著提升用户体验，特别是在支持深色模式的应用中。

通过结合 colorScheme 和 SwiftUI 的声明式设计，可以方便地创建适应不同模式的应用。