Dark mode vs status bar style iOS

tkclark · April 3, 2020, 5:55am

I’ve added support for dark mode in my app. It simply toggles the class dark on the <body> tag. Looks great until I view it on my iPhone 11 Pro Max and the black text on a white background becomes back text on a black background. Looks like I might need to hook into the native part of the phone to tell it what’s up. Anybody know how to do this?

I am using Ionic/Vue/Vuex if that matters. Thanks!

Before:

After:

tkclark · April 4, 2020, 12:28am

I was able to fix this issue by doing the following:

import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar } = Plugins;

watch: {
		darkMode() {
			document.body.classList.toggle('dark', this.darkMode);
			StatusBar.setStyle({
				style: this.darkMode ? StatusBarStyle.Dark : StatusBarStyle.Light
			});
		}
}