script.js

const matchDarkMode = window.matchMedia("(prefers-color-scheme: dark)");

// event listener
matchDarkMode.addListener(() => {
  const isDark = matchDarkMode.matches;
});

// one time check
const isDark = matchDarkMode.matches;

// If you have a page that needs to render in light theme you can override the statusBar for that page.

// run in iOS app context only
StatusBar.setStyle({ style: StatusBarStyle.Light });

// WARNING
// If on Capacitor <3.0 you can't reset the StatusBarStyle to Auto
// You'll need to manually handle the events and keep it up to date.

if (isDark) {
  statusBarStyle = StatusBarStyle.Dark;
} else {
  statusBarStyle = StatusBarStyle.Light;
}

if (isiOSApp) {
  // TODO: Once we update to capacitor 3.0 we should have this clear the status bar style instead of setting it.
  StatusBar.setStyle({ style: statusBarStyle });
}