在 SwiftUI 中打开暗模式时更改背景颜色答案

【问题标题】：Change background color when dark mode turns on in SwiftUI在 SwiftUI 中打开暗模式时更改背景颜色
【发布时间】：2020-04-28 20:46:52
【问题描述】：

我在 SwiftUI 中创建了一个自定义工作表，背景颜色为白色 .background(Color.white)

现在，当用户在 iOS 上打开深色模式时，我希望背景颜色变为黑色。但我找不到像Color.primary 这样的动态背景颜色，用于文本颜色等。

那么有什么办法可以在开启深色模式时将背景颜色改为黑色吗？

【问题讨论】：

标签： swiftui

【解决方案1】：

将.background(Color.white) 更改为.background(Color(UIColor.systemBackground))

【讨论】：

【解决方案2】：

这是可能的方法（适用于任何颜色）

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

        ...
        var body: some View {

            // ... to any view
            .background(colorScheme == .dark ? Color.black : Color.white)

        }
   }

【讨论】：

【解决方案3】：

为了详细说明现有的两个答案，有几种方法可以根据您要实现的目标，根据浅色或深色模式（又名 colorScheme）进行背景更改。

如果您将背景颜色设置为白色，因为这是默认背景颜色，并且您希望系统能够在用户切换到深色模式时更新它，请将 .background(Color.white) 更改为 .background(Color(UIColor.systemBackground))（umayanga 的回答）。

例如

// Use default background color based on light/dark mode

struct ContentView: View {
...
var body: some View {

    // ... to any view
    .background(Color(UIColor.systemBackground))

}

如果您想根据设备处于浅色或深色模式来自定义视图的颜色，您可以这样做（来自 Asperi 的回答）：

// Use custom background color based on light/dark mode

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

...
var body: some View {

    // ... to any view
    .background(colorScheme == .dark ? Color.black : Color.white)

}

请注意，许多 SwiftUI 视图默认将其背景颜色设置为 .systemBackground，因此如果您使用 ScrollView、List、Form 等，它们将使用默认的系统背景颜色，您不需要除非您想自定义它，否则请使用 .background。

【讨论】：

.systemBackground 用于浅色模式，但在深色模式下为灰色。但是对于 iOS 14 小部件，深色模式的默认背景是纯黑色。
@myatmins 暗模式的系统背景是纯黑色。但是如果视图在一张纸上，那就是 gyeyish (systemGray6)

【解决方案4】：

你可以扩展 UIColor 如下所示

extension UIColor{
    struct Custom {
        static var black: UIColor{
            if #available(iOS 13, *) {
                return UIColor.init { (trait) -> UIColor in
                    return trait.userInterfaceStyle == .dark ? UIColor.white : UIColor.black
                }
            }
            return UIColor.black
        }
    }
}

然后使用.background(Color(UIColor.Custom.black))

启用/禁用暗移动时，您的视图将更新颜色

【讨论】：

【解决方案5】：

如果您想要直接从 Color 运行的东西（就像您正在使用 Color.primary 一样），并且在 iOS 和 macOS 上都可以使用（UIColor 在 macOS 上不起作用)，您可以使用以下简单的Color 扩展，它使用条件编译在任一操作系统上正常工作。

然后，您只需像任何其他 SwiftUI Color 一样从代码中的其他位置访问这些。例如：

let backgroundColor = Color.background

使用这种方法无需检查colorScheme 或userInterfaceStyle：当用户在明暗模式之间切换时，操作系统会自动切换。

我还添加了“二级”和“三级”颜色，这在 macOS 上有点主观，但如果需要，您可以随时将它们更改为其他一些 NSColor 属性。

Swift v5.2：

import SwiftUI

public extension Color {

    #if os(macOS)
    static let background = Color(NSColor.windowBackgroundColor)
    static let secondaryBackground = Color(NSColor.underPageBackgroundColor)
    static let tertiaryBackground = Color(NSColor.controlBackgroundColor)
    #else
    static let background = Color(UIColor.systemBackground)
    static let secondaryBackground = Color(UIColor.secondarySystemBackground)
    static let tertiaryBackground = Color(UIColor.tertiarySystemBackground)
    #endif
}

【讨论】：

【解决方案6】：

如果您希望为亮/暗模式使用自定义背景颜色，那么我建议您在 Assets 文件夹中创建 New Color set，并为不同的外观使用自定义颜色值。

这样，当显示模式切换时，背景颜色会自动改变而不需要添加一行代码。

然后使用颜色列表的这种颜色作为控制器视图背景。

【讨论】：

【解决方案7】：

我们还可以通过将它们添加到Assets 文件夹来自动更改颜色。

在Assets 文件夹中添加新颜色集
添加颜色集后，您可以根据自己的方便命名，并可以为Any Appearance、Dark Appearance、Light Appearance 配置颜色。
要访问您新添加的颜色集，您需要遵循以下 Color 的初始化语法
```
Color("your_color_set_name")
```
为了获得最佳实践，您不希望代码中填充颜色集名称的字符串值。您可以创建一个扩展，使使用更加实用和有序。
```
extension Color {
        static var tableViewBackground: Color {
            Color("tableViewBackground")
        }
    }
```

【讨论】：

【解决方案8】：

我个人不喜欢在Assets 文件夹中创建颜色集。

我更喜欢它在代码中，因此最佳实践如下：

extension Color {

    static var primaryColor: Color {
        Color(UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 255, green: 255, blue: 255, alpha: 1) : UIColor(red: 200, green: 200, blue: 200, alpha: 1) })
    }

}

使用：

.background(Color.primaryColor)

【讨论】：

你有同样的 macOS 解决方案吗？
使用 NSColor 代替 UIColor
你用 NSColor 试过了吗？我已经尝试过了，但失败了。 prnt.sc/162l01n 。正如我所见，NSColor 没有类似的初始化程序

【解决方案9】：

SwiftUI 具有自动适应配色方案的颜色。例如，您可以使用.background(Color(.textBackgroundColor)) 来获取合适的背景颜色来呈现文本，而不管配色方案如何。

【讨论】：

【解决方案10】：

查看此页面，了解各种 UI 元素的推荐系统颜色。使用这些应该注意暗/亮模式切换。

UI Element Colors

【讨论】：