SwiftUI Academy · 课时

适配浅色与深色模式

Q: 「适配浅色与深色模式」这节课中我会学到什么？

使用语义颜色适配两种外观。 你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用语义颜色适配两种外观。

第 4 / 4 课13 个步骤

适配浅色与深色模式 是 CoddyKit 上的免费 SwiftUI Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 SwiftUI Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 SwiftUI Academy 课程共包含 4 节课。

两种外观

iOS 提供浅色和深色模式，用户可以随时切换。优秀的应用无需额外努力，也能在两种模式下都呈现良好效果。

使用语义颜色

请使用语义颜色，例如 Color.primary 或 Color(.systemBackground)。它们会在两种外观之间自动切换。

Text("Title")
    .foregroundStyle(.primary)
    .background(Color(.systemBackground))

避免硬编码颜色

固定的 Color.black 背景在深色模式下仍然是黑色，可能会融入背景而消失。语义颜色会自适应，直接指定的颜色不会。

Text("Hi")
    .background(.black)

资源目录颜色

在资源目录中定义颜色，并分别设置任意外观和深色外观的值。按名称引用它，系统就会为您自动切换。

Color("Brand")

主要颜色和次要颜色

对不太重要的文本使用 .secondary。它会在每种模式下适当变暗，同时保持可读性。

Text("Subtitle")
    .foregroundStyle(.secondary)

使用材质营造层次

像 .ultraThinMaterial 这样的系统材质会模糊背景并适应当前模式，让卡片呈现原生质感。

VStack { }
    .background(.ultraThinMaterial)

检测模式

当您确实需要为不同模式显示不同内容时，可以使用 @Environment(\.colorScheme)读取当前外观。

@Environment(\.colorScheme) var scheme

根据方案分支

有了 colorScheme 后，您就可以选择资源，例如替换标志；但只有在语义颜色无法满足需求时才应这样做。

Image(scheme == .dark ? "logoDark" : "logoLight")

预览两种模式

在预览中添加 .preferredColorScheme(.dark)，无需离开 Xcode 即可检查深色模式。

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

强制指定模式

您可以使用 preferredColorScheme锁定某个屏幕，但只要条件允许，优先尊重用户的系统选择。

ContentView()
    .preferredColorScheme(.dark)

检查对比度

请确认文本在两种模式下都清晰可读。良好的对比度是无障碍设计的一部分，而不只是视觉风格。

快速检查

哪种颜色选择会在浅色和深色模式之间自动适应？

在交互式课程中回答

回顾

您的应用现在能适应任何外观：使用语义颜色、资源颜色和材质，并预览两种模式。🌓

免费开始

用 AI 导师学习 Swift — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 30
课程: 120

免费开始学习查看完整课程

常见问题解答

「适配浅色与深色模式」课时是免费的吗？

是的 — 「适配浅色与深色模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。

「适配浅色与深色模式」这节课中我会学到什么？

使用语义颜色适配两种外观。你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 SwiftUI Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「适配浅色与深色模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 SwiftUI Academy 课中编写并运行代码吗？

能。每节 SwiftUI Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 SwiftUI Academy