SwiftUI

2024 年 6 月 23 日

SwiftUI 設定 macOS App 的日夜間模式

已複製到剪貼板


用 SwiftUI 開發 macOS App 時,可以用 preferredColorScheme 來設定 App 的日夜間模式,也可以對 AppKit 裡的 NSAppearance 加以設定。

macOS 的深淺外觀
macOS 的深淺外觀

用純 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 ⋯⋯ 之類的。

分享文章

已複製到剪貼板

主題文章

查看 SwiftUI

超級感謝

關於 XcodeProject

XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。


Contacts

Ricky Chuang

XcodeProject

RickyChuang.xcodeproj@gmail.com

XcodeProject 聯絡

contact.xcodeproj@gmail.com

最新文章