Is it possible to opt-out of dark mode on iOS 13?
How to Opt-Out of Dark Mode on iOS 13 and Keep the Light On! 🌞🌚
Dark Mode on iOS 13 is all the rage, but what if you want to keep your app's appearance consistent with a light theme, even in this dark era? Fear not, fellow app developers! In this post, we'll explore the question of whether it's possible to opt-out of Dark Mode on iOS 13 and provide you with easy solutions to achieve that.
The Dilemma: On a Half/Half Appearance 😅
A part of your app relies heavily on web views, which do not yet have native dark theme support. Unfortunately, your web team has no plans to implement a dark theme for the website at the moment. As a result, your app could have an inconsistent look with Dark Mode support enabled on iOS 13. So, can we escape the darkness and embrace the light?
Option 1: Override the System Appearance 💡
iOS 13 introduces a new way to override the system appearance on your app. By default, it follows the system-wide appearance settings, but you can override it programmatically. Here's how you can achieve it:
if #available(iOS 13.0, *) {
overrideUserInterfaceStyle = .light
}By setting the overrideUserInterfaceStyle property of your root view controller to .light, you can ensure that your app always displays in light mode, regardless of the system-level Dark Mode settings. This simple tweak will make your app match the website's light theme.
Option 2: Embrace the Dark Side, with a Twist! 🌗
Alternatively, you could choose to embrace Dark Mode in your app, but with your own custom styling to harmonize with the website's light theme. This way, your app can adapt to Dark Mode while maintaining consistency. Here's how you can do it:
Incorporate a dedicated CSS class or ID in your web views to target elements that need to remain in light mode. For example, you could use
<div id="light-mode">or<body class="light-mode">.Inject custom CSS rules into your web views that override the default styles applied in Dark Mode. This will keep specific elements in a light appearance, regardless of the system-wide Dark Mode settings.
let userContentController = WKUserContentController()
let userScript = WKUserScript(source: "document.body.classList.add('light-mode');", injectionTime: .atDocumentEnd, forMainFrameOnly: true)
userContentController.addUserScript(userScript)
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
let webView = WKWebView(frame: .zero, configuration: configuration)Remember to review and adjust the selectors and custom CSS rules based on your app's specific needs.
The Choice is Yours! Make a Statement! 💪
Whether you decide to opt-out of Dark Mode entirely or find a middle ground by customizing your app's appearance, it's important to make a statement that matches your brand and provides a seamless experience for your users. The choice is yours, and now you have the knowledge to take control of your app's style when it comes to Dark Mode on iOS 13.
Share your thoughts in the comments below! 👇 Have you opted-out of Dark Mode in your app, or did you customize it to blend with Dark Mode's dark aesthetic? Let's engage in a spirited discussion and help each other create amazing user experiences!
Take Your Tech Career to the Next Level
Our application tracking tool helps you manage your job search effectively. Stay organized, track your progress, and land your dream tech job faster.
