Dark mode vs status bar style iOS

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!



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);
				style: this.darkMode ? StatusBarStyle.Dark : StatusBarStyle.Light
1 Like