用 SwiftUI 開發 macOS App 時,可以用 preferredColorScheme
來設定 App 的日夜間模式,也可以對 AppKit 裡的 NSAppearance
加以設定。
用純 SwiftUI 設定 macOS App 的日夜外觀
SwiftUI 要設定一個畫面或是整個 App 的深淺外觀,有以下兩個方法:
指定 Environment 裡的 Color Scheme
這個方法,可以指定要 Light 或 Dark 的模式:
@main
struct XcodeProjectApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.colorScheme, .light) // 或 .dark
}
}
}
Environment 裡的 ColorScheme 代表著 View 當前所處的 Light 或 Dark 模式,當我們這樣寫,就是直接設定 ContentView 的日夜模式。不過,這個方式有個缺點,就是一定要在 Light、Dark 之間選一個,不能有跟隨系統的選項。
直接設定想要的 Color Scheme
這個方法比上一個更直接,除了 Light、Dark 模式,也能設定跟隨系統:
@main
struct XcodeProjectApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.preferredColorScheme(.light)
// 深色模式傳入 .dark
// 跟隨系統傳入 .none 或 nil
}
}
}
SwiftUI 有 preferredColorScheme 這個更直接設定 Color Scheme 的方法,它一樣能指定 Light、Dark 模式,而如果想讓 App 跟隨系統的話,則可以傳入 .none
或是 nil
。
注意
雖然 SwiftUI 提供了這兩個方法來讓我們設定 App 的日夜間模式,但在使用上卻可能發生,切換時畫面並未正常變換的 Bug,這時就要使用 AppKit 來設定。
在 SwiftUI 中用 AppKit 設定 macOS App 的日夜外觀
當我們用 SwiftUI 在 macOS 上開發 App 時,大多時候有 import SwiftUI 的話,就不用特別 import AppKit,也能使用 AppKit 裡的一些東西。而如果我們要設定 App 的日夜模式的話,會指定 NSApplication 裡的 appearance:
// 淺色模式
NSApplication.shared.appearance = NSAppearance(named: .aqua)
NSApplication 下的 appearance 預設為 nil
,代表跟隨系統,而 aqua 就是 AppKit 中淺色模式的用語。所以如果我們想讓 App 的外觀變回跟隨系統的話,就直接把 NSApplication 的 appearance 設為 nil 就行了:
// 外觀跟隨系統
NSApplication.shared.appearance = nil
深色模式的話,則用 darkAqua:
// 深色模式
NSApplication.shared.appearance = NSAppearance(named: .darkAqua)
因為像這樣使用 AppKit 中的 NSApplication 來設定 App 的外觀,跟使用 SwiftUI 的 modifier 方法不一樣,所以這些程式會可能會是寫在:Button 被點擊時、ViewModel 的 init、或是某個 View 的 onAppear ⋯⋯ 之類的。
關於 XcodeProject
XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。