How to Animate Dark Mode Change in iOS

How to animate dark mode change in iOS?

There is an easy way to change the app dark mode theme with animation

if let window = UIApplication.shared.keyWindow {
    UIView.transition (with: window, duration: 0.3, options: .transitionCrossDissolve, animations: {
        window.overrideUserInterfaceStyle = .dark //.light or .unspecified
    }, completion: nil)
}

iOS light mode and dark mode

@available(iOS 13.0, *)
func changeMode() {

      let alertController = UIAlertController(title: nil, message: nil, preferredStyle: .alert)
          alertController.addAction(UIAlertAction(title: "DARK MODE", style: .default, handler: { action in

           UIWindow.animate(withDuration: 0.5, animations: {
                 UIApplication.shared.keyWindow?.overrideUserInterfaceStyle = .dark
                //also try : UIApplication.shared.windows.last?.overrideUserInterfaceStyle = .dark
                })
         }))

          alertController.addAction(UIAlertAction(title: "LIGHT MODE", style: .default, handler: { action in

           UIWindow.animate(withDuration: 0.5, animations: {
                 UIApplication.shared.keyWindow?.overrideUserInterfaceStyle = .light
                 //UIApplication.shared.windows.last?.overrideUserInterfaceStyle = .light

                })

          }))

    self.present(alertController, animated : true)

}

SwiftUI animate background color change when a condition is met

I have modified your body. Lets try this for easeInOut animation:-

var body: some View {
        VStack {
            Button {
                numberOfTaps += 1
                color = (numberOfTaps == 3) ? Color.blue: Color.green
            } label: {
                Text("Up")
            }
            Text("\(numberOfTaps)")
                .padding()
                .background(color.animation(.easeInOut))
            
            Button {
                numberOfTaps -= 1
                color = (numberOfTaps == 3) ? Color.blue: Color.green
            } label: {
                Text("Down")
            }
        }
    }

Note:- You can play with different animation property eg. easeIn,
easeOut etc

Manually set light/dark mode in SwiftUI and save users choice

Here is possible approach (scratchy, you can find here on SO property wrapper for defaults and use it for better styling, but the idea to achieve your goal is the same)

Tested with Xcode 11.4 / iOS 13.4

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    private(set) static var shared: SceneDelegate?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        Self.shared = self

        let contentView = ContentView()

        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)

            // restore from defaults initial or previously stored style
            let style = UserDefaults.standard.integer(forKey: "LastStyle")
            window.overrideUserInterfaceStyle = (style == 0 ? .dark : UIUserInterfaceStyle(rawValue: style)!)

            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
        }
    }

   ...
}

struct ContentView: View {
    var body: some View {
         // manipulate with style directly in defaults
         Toggle(isOn: Binding<Bool>(
            get: { UserDefaults.standard.integer(forKey: "LastStyle") !=
                        UIUserInterfaceStyle.light.rawValue },
            set: {
                SceneDelegate.shared?.window!.overrideUserInterfaceStyle = $0 ? .dark : .light
                UserDefaults.standard.setValue($0 ? UIUserInterfaceStyle.dark.rawValue : UIUserInterfaceStyle.light.rawValue, forKey: "LastStyle")
            }
         )) {
             Text("is Dark")
        }
    }
}

---

Related Topics