CODEWITHSUNDEEP
iosswift
letsCode
letsCode

Reputation: 3046

Setting app to have light/dark mode without the use of the device setting

I am developing an iOS application, and within the settings of the app, I will allow the users to have light or dark mode. The app, in default, will be light mode, but if the user changes it to dark mode, it will change labels/backgrounds/buttons, etc.

I plan to do this by storing the light or dark mode in Shared Defaults, and when the pages load, I will check that.

If it is dark mode, I know I can change the colors on demand within the ViewDidLoad(), but that seems like way too much work. I have the set of colors I need here:

enter image description here

I know I can set the label to this specific color if I want like so...

enter image description here

but I do believe this is controlled by the device level dark/light mode settings. If there a way I can create a template to control the colors? Im sure I can create a function to adjust the colors of everything, but having to create an outlet for everything can be confusing as times.

Any tips for this?

Upvotes: 0

Views: 1430

Answers (4)

user4860907
user4860907

Reputation:

Dark mode has so many options and the code to manage this can be overwhelming and error prone that we decided to look at what our users needed/wanted and then we opted for the most natural (and less code intensive) approach to supporting dark mode.

We decided we wanted our app to follow the these principles:

  1. Default is that App switches when the Device switches (unless user overwrites in control center, the app switches when the local time zone turns dark/light.
  2. Some users have a preference for using the app in one mode always. We added an option to overwrite the default device setting to always present the app in that mode.
  3. Choice of colors can be overwhelming to the user. We already had options for the user to change color for notifications (alerts/Banners etc) so when it came to picking color sets for light/dark mode we opted to use system colors, which makes the implementation much easier and manages the switch between modes automatically.

The following is not a complete solution, but code snippets to help you get started with your solution:

  1. User setting overwriting Mode

     override func viewDidLoad() {
     super.viewDidLoad()
     // get the user option and set the relevant mode
     if Options.userDarkModeOption == .dark {
         overrideUserInterfaceStyle = .dark
     } else {
         overrideUserInterfaceStyle = .light
     }
 }

  2. Detecting Mode change (user in control center or local time change)

     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
 super.traitCollectionDidChange(previousTraitCollection)
 // Update user interface if changes to Dark Mode detected.
 MasterTable.reloadData()

    }

  3. Override default colors (try to limit to specific cases)

     switch traitCollection.userInterfaceStyle {
     case .dark :
         cell?.contentView.backgroundColor =  = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1)
     case .light :
         cell?.contentView.backgroundColor =  UIColor.systemTeal
     case .unspecified :
         cell?.contentView.backgroundColor =  UIColor.systemOrange
     @unknown default:
         print("Error: Unknown userInterFaceStyle in masterVC/cellforitem")
     }

Upvotes: 1

nitin.agam
nitin.agam

Reputation: 2142

This is how you can manage your colors in light and dark modes.

https://medium.com/flawless-app-stories/extended-uicolor-in-ios-ab79e2b217bf?sk=b5e8dded852a47f9b8241f2f2e2de49e

Upvotes: 0

Sam Yerznkyan
Sam Yerznkyan

Reputation: 36

I think you should just change a global variable stored in UserDefaults or somewhere else. And have all the colours set in assets.xdasstets. There you put colour in light mode and dark mode. But as I know there's no way to change the appearance of the app systematically (Like iOS is doing). Maybe you can try RXSwift )) with it's reactive programming. Go ahead.

Upvotes: 0

Max
Max

Reputation: 22325

I built an app with light and dark mode pre-iOS-13, here is what we used

  • Add tons of outlets and manually set all of the colors in code. Requires lots of work, easy to miss something
  • Use UIAppearance proxies to change the colors of default UI elements. Often has unintended side-effects, requires lots of manual testing to iron out corner cases

Neither of these options are great. However if your minimum iOS version is 13 or greater, the better option is to add native dark mode support using adaptive and semantic colors. Then you should be able to add a UI control in your app which sets overrideUserInterfaceStyle on a per-view or per-view-controller basis.

Upvotes: 0

Related Questions