在現代 App 設計中，「深色模式（Dark Mode）」已成為使用者體驗的重要一環。SwiftUI 提供了非常簡單又強大的方式來支援這項功能。

今天，我們就來看看如何在 App 中加入Dark Mode！

什麼是 Dark Mode？

Dark Mode（深色模式）能夠在夜間或低光環境下減少眼睛疲勞，也能讓 App 看起來更現代。

在 SwiftUI 中，只要遵守「系統顏色設計原則」，大多數情況下都能自動支援深淺模式切換。

自動支援 Dark Mode

SwiftUI 內建的顏色（例如.primary、.secondary、.background）會自動依據目前系統主題切換，不需要手動調整。

Text("Hello, SwiftUI!")
    .foregroundColor(.primary)
    .background(.background)

在預覽中切換 Dark Mode

想要在 Xcode 預覽中比對深淺模式的效果，可以這樣設定：

#Preview("Dark Mode") {
    ContentView()
        .preferredColorScheme(.dark)
}

#Preview("Light Mode") {
    ContentView()
        .preferredColorScheme(.light)
}

這樣不需要改系統設定，就能同時檢視兩種模式的畫面。

手動設定主題顏色

若想要自訂顏色（例如品牌色），可使用 Asset Catalog：

1. 打開 Assets.xcassets
2. 新增 Color Set
3. 為 Any, Dark 各指定不同顏色

4. 在 SwiftUI 使用：

Text("品牌色文字")
    .foregroundStyle(Color("BrandColor"))

這樣在不同模式下會自動切換對應顏色。

App 內手動切換深色模式功能

如果想讓 App 的主題不跟系統走，也可以自行實作切換功能：

struct ThemeSwitcherView: View {
    @AppStorage("themeMode") private var themeMode: String = "system"

    var body: some View {
        VStack(spacing: 20) {
            Text("主題模式")
                .font(.title)
                .foregroundColor(Color("BrandColor"))
                .bold()

            Picker("外觀", selection: $themeMode) {
                Text("跟隨系統").tag("system")
                Text("淺色模式").tag("light")
                Text("深色模式")
                    .tag("dark")
            }
            .pickerStyle(.segmented)
        }
        .padding()
        .preferredColorScheme(currentScheme)
    }

    private var currentScheme: ColorScheme? {
        switch themeMode {
        case "light": return .light
        case "dark": return .dark
        default: return nil
        }
    }
}

這段程式的運作原理是：

• Picker 綁定到 @AppStorage("themeMode")，會儲存使用者選擇的主題。
• 每次選項改變時，currentScheme 也會即時更新。
• preferredColorScheme 依據選擇結果切換 App 的顯示模式。

今日小結

今天我們學會了如何讓 App 支援深色與淺色模式（Dark / Light Mode），讓介面能根據系統或使用者偏好自動切換外觀。

• 使用 .primary、.secondary、.background 等系統色自動支援深淺模式。
• 可在 Assets.xcassets 自訂顏色，設定「Any, Dark」對應色。
• 若想讓 App 內可自由切換深淺主題，可搭配 @AppStorage 與 preferredColorScheme 實作。