

Supporting Dark Mode: Responding to Change
source link: https://www.tuicool.com/articles/hit/3qAVbmn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

To support Dark Mode elegantly in your app, you need to not only initialize your user interface appropriately for the current appearance, but also be prepared to adapt on the fly if the user changes appearance after your interface is already visible on the screen.
In situations where you use semantic colors or consult the current appearance at drawing time, there’s nothing else to be done. Since changing the appearance invalidates all views on the screen, your app will redraw correctly without any additional intervention.
Other situations may demand more customized behavior. I’ll give a couple examples later in this series, but for now just take my word that you may run into such scenarios.
If you have a custom view that needs to perform some action when its appearance changes, the most typical way to handle this is by implementing the “viewDidChangeEffectiveAppearance” method on NSView. This is called immediately after your view’s effectiveAppearance changes, so you can examine the new appearance, and update whatever internal state you need to before subsequent drawing or event handling methods are called:
class CustomView: NSView { override func viewDidChangeEffectiveAppearance() { // Update appearance related state here... } }
If you need to react to appearance changes in the context of an NSViewController, your best bet may be to use Key Value Observing (KVO) to observe changes to the “effectiveAppearance” property on the view controller’s view. This approach will set your view controller up to be notified around the same time the view itself would be.
In some situations it’s more interesting to know whether, at a high level, the application’s appearance has shifted in a significant way. For this you can observe “effectiveAppearance” on the NSApplication.shared instance. There is no standard NotificationCenter notification for this, but I found it useful enough in my code bases that I added my own.
By centralizing KVO observation of NSApp.effectiveAppearance, I can translate all such changes into NotificationCenter-based broadcasts that any component of my app can observe. To implement something like this, first declare an NSNotification.Name extension in some high-level class such as your application delegate:
extension NSNotification.Name { public static let appAppearanceChanged = NSNotification.Name("appAppearanceChanged") }
Then implement the centralized KVO somewhere early in launch, such as in applicationDidFinishLaunching:
observer = NSApp.observe(\.effectiveAppearance) { (app, _) in let nc = NotificationCenter.default nc.post(name: .appearanceChanged, object: app) }
Now any code in your app that needs to to be alerted when the app changes appaerance can observe NSNotification.Name.appAppearanceChanged and respond by adjusting whatever it needs to.
Recommend
-
63
As you adapt your app to support Dark Mode, you may run into situations where you need to determine, in code, what the active appearance is. This is most typical in custom views that vary their drawing based on the curren...
-
58
When Apple announced Dark Mode at WWDC 2018, one of my first thoughts was: “Aha! So that’s why Apple has us all switching our icons to template (monochrome) style images.” These images do tend to adapt pretty well to Dark...
-
80
180 apps optimized for new iOS 13 dark mode Top Picks Ap...
-
89
180 apps optimized for new iOS 13 dark mode Top Picks Ap...
-
93
Supporting Dark Theme Set Force Dark 2:41 Before usi...
-
6
Supporting Dark Mode: On the Web I wrote several articles about Supporting Dark Mode on the Mac, including one about supporting Dark Mode for
-
7
Supporting Dark Mode: In-App Web ContentThis article is part of a series on Supporting Dark Mode in macOS applications. For the best experience, start with the Introduct...
-
11
macOS Mojave adds a Dark Mode for native apps that makes you look approximately 78 percent cooler when using the computer. In Safari Technology Preview 68
-
54
How to Change Between Light and Dark Mode Dynamically with KendoReact Once you have a dark theme, how do you implement a toggle between dark...
-
11
Microsoft’s change to dark mode in Edge could prove divisive
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK