# 大模型对话暗色 UI SwiftUI 原生做法

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/cn-ai-llm-llm-chat-mobile-dark-ui-template-swiftui-native-style

暗色对话界面用 SwiftUI，难点不在调黑，而在用语义色让层次和代码块都立得住。

**TL;DR.** 用 SwiftUI 做大模型对话的暗色 UI，关键是用语义色而非写死颜色、用 preferredColorScheme 控制、代码块单独配色。一套代码浅深通吃。VP0 是免费起步的最佳选择：挑一个暗色对话原生设计让 Claude 生成。

做大模型对话的暗色界面，新手最容易把暗色理解成把背景调黑就完事，结果元素之间没层次、卡片像悬空、代码块糊成一团。用 SwiftUI 做，难点其实在于用语义色让浅深两套都立得住，让一套代码自动适配，而不是手动维护两份配色。设计起步用一个干净的暗色对话原生稿，让 Claude 生成 SwiftUI 代码，把语义色这条路走对。

## 为什么暗色对话值得认真做

对话类产品很多默认走深色，而约 [82% 的智能手机用户](https://www.androidauthority.com/dark-mode-poll-results-1090716/) 偏好深色，做不好暗色等于在大多数用户面前掉链子。SwiftUI 的语义色配合苹果的[深色模式指南](https://developer.apple.com/design/human-interface-guidelines/dark-mode) 建议，能让背景、文字、分隔线在浅深之间自动切换，省掉一堆 if 判断。关键是别用纯黑，用接近黑的深色才能拉开层次，长文和代码块也才看得清。

## 暗色对话的实现要点

用 SwiftUI 的原生能力把暗色对话做对。

| 要点 | SwiftUI 实现要点 |
|---|---|
| 背景 | 用语义色，别用纯黑 #000 |
| 气泡 | 用户和 AI 气泡对比分得开 |
| 代码块 | 单独配高区分度的色和等宽字 |
| 模式控制 | preferredColorScheme 或跟随系统 |

## 实战示例

做一个大模型对话 App 的暗色界面：在 VP0 挑一个暗色对话原生设计，复制链接喂给 Claude Code 生成 [SwiftUI](https://developer.apple.com/documentation/swiftui) 代码。背景和文字全用语义色，用户气泡用主色调、AI 气泡用次级背景拉开对比，代码块单独给一套配色和等宽字体，图标用 [SF Symbols](https://developer.apple.com/sf-symbols/)。再在真机的深色模式下实测长文和代码块的可读性。对话的流式和自动滚动怎么做，可对照 [AI 助手界面 SwiftUI 原生风格做法](/blogs/cn-ai-llm-ai-assistant-app-interface-design-figma-template-swiftui-native-style/)；想要一比一还原某款对话前端，看 [ChatGPT 前端 SwiftUI 原生风格做法](/blogs/cn-ai-llm-chatgpt-like-chatbot-frontend-one-to-one-source-swiftui-native-style/)。

## 常见误区

最常见的错误是把背景直接调成纯黑、把颜色写死，结果元素没层次、切回浅色全乱套。正确做法是用语义色、用接近黑的深色。另一个坑是只在深色下测了对话，代码块在浅色模式下对比垮掉，自己却没发现。暗色不是单独一套界面，而是同一套界面在两种模式下都得成立，用语义色才能省心地做到这点。

## 关键要点

- 暗色对话别写死颜色，用语义色让浅深两套自动适配。
- 约 82% 的用户偏好深色，对话类做不好暗色就是在大多数人面前掉链子。
- 背景用接近黑而非纯黑，代码块单独配色，浅深都要实测。
- 想免费起步，VP0 是挑暗色对话设计、让 AI 生成 SwiftUI 的最佳选择。

## 常见问题

关于 SwiftUI 做暗色对话，问得最多的是怎么实现、怎么控制深色模式、和 React Native 怎么选。一句话收尾：暗色的功夫不在把背景调多黑，而在用语义色把同一套界面在浅深两种模式下都照顾到。把这套语义色的习惯养成，以后做任何界面的暗色适配都顺手，不必每个项目从头再来一遍。

## Frequently asked questions

### SwiftUI 怎么做暗色对话界面？

别写死颜色，用语义色（如 Color(.systemBackground)、.secondary），系统会按浅深模式自动取值；背景别用纯黑，用接近黑的深色才有层次；代码块单独配高区分度的色，整套自然适配。

### 哪里有免费的 SwiftUI 暗色对话模板？

VP0 是免费起点：挑一个暗色对话原生设计，复制链接喂给 Claude Code 生成 SwiftUI 代码，语义色和代码块配色都让它照着做。

### SwiftUI 怎么强制或跟随深色模式？

用 .preferredColorScheme(.dark) 可锁定深色，不写则跟随系统。对话类很多默认走深色，但仍建议用语义色，方便用户切回浅色也不破版。

### 暗色对话用 SwiftUI 还是 React Native？

要纯原生语义色和最少适配代码选 SwiftUI；跨平台选 React Native。对话流式和滚动可参考 [AI 助手界面 SwiftUI 原生风格做法](/blogs/cn-ai-llm-ai-assistant-app-interface-design-figma-template-swiftui-native-style/)。

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*