How to make button for Dark Mode

Viewed 39

I want to make possibility to switching between dark and light mode on my main screen. I don't want to make it with UISlider, but with just a button. You tap once and its dark mode, you tap again and its light. Is it possible to do?

1 Answers

UIKit

UPDATE

The updated version is more reliable, it checks the overrideUserInterfaceStyle and if it is .unspecified there is a fallback to UIScreen.main.traitCollection.userInterfaceStyle

//
//  ViewController.swift
//  ToggleInterfaceStyle
//
//  Created by Sebastian on 23.09.22.
//

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Here is the button
        let toggleInterfaceStyleButton = UIButton()
        toggleInterfaceStyleButton.setTitle("Toggle Interface Style", for: .normal)
        toggleInterfaceStyleButton.setTitleColor(.tintColor, for: .normal)
        toggleInterfaceStyleButton.frame = CGRect(x: 15, y: -50, width: 300, height: 500)
        toggleInterfaceStyleButton.addTarget(self, action: #selector(toggleInterfaceStyle), for: .touchUpInside)
        self.view.addSubview(toggleInterfaceStyleButton)
    }
    
    @objc func toggleInterfaceStyle() {
        let interfaceStyle = overrideUserInterfaceStyle == .unspecified ? UIScreen.main.traitCollection.userInterfaceStyle : overrideUserInterfaceStyle
        if interfaceStyle != .dark {
            overrideUserInterfaceStyle = .dark
        } else {
            overrideUserInterfaceStyle = .light
            
        }
    }
}

UIKit Toggle: User Interface Style (light/dark)

SwiftUI

For SwiftUI, you can change the appearance (light mode / dark mode) with .preferredColorScheme, it changes the appearance for the entire app. In this example I added a second view and a navigationLink to show that the styles stays as selected:

import SwiftUI

struct ContentView: View {
    
    @State private var scheme: ColorScheme = .light
    @State private var isShowingNewAccountView = false
    
    func toggleScheme() {
        if scheme == .light {
            scheme = .dark
        } else {
            scheme = .light
        }
    }
    
    var body: some View {
        NavigationView() {
            VStack {
                
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                    .padding()
                Text("Hello, world!")
                    .padding()
                
                
                NavigationLink(destination: SecondView()) {
                    Text("Second View")
                }
                
                Button(action: {
                    self.toggleScheme()
                }) {
                    Text("Toggle Scheme")
                }
                .padding()
            }
        }
        .preferredColorScheme(scheme)
    }
}

struct SecondView: View {
    
    var body: some View {
        
        VStack {
            
            Image(systemName: "airplane")
                .imageScale(.large)
                .foregroundColor(.accentColor)
                .padding()
            Text("Hello, second view!")
                .padding()
        }
    }
}

SwiftUI Toggle: User Interface Style (light/dark)

Related