bug: 🌙 Dark mode not detected in JavaScript and CSS

[opuu]

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 3.0.0
  @capacitor/core: 3.0.0
  @capacitor/android: 3.0.0
  @capacitor/ios: 3.0.0

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 3.0.0-rc.4
  @capacitor/core: 3.0.0
  @capacitor/android: 3.0.0

Platform(s)

Android

Current Behavior

window.matchMedia('(prefers-color-scheme: light)') always returns light mode true and window.matchMedia('(prefers-color-scheme: dark)') always returns dark mode false.

Expected Behavior

window.matchMedia('(prefers-color-scheme: dark)') should return true when dark theme is applied to system.

Code Reproduction

Initial capacitor project

npm --version output: 7.15.0

node --version output: v14.17.0

Additional Context

possible fix on stackoverflow

[opuu]

Found this plugin that fixes the problem but this should be working on core without any plugins.

https://github.com/robingenz/capacitor-android-dark-mode-support

[davidcopano]

In one of my projects, I added this piece of code in the <ROOT_PROJECT_DIRECTORY>/android/app/src/main/java/com/<APP_ID_PIECE1>/<APP_ID_PIECE2>/MainActivity.java file, inside the onCreate function, in order to detect whether dark mode is enabled on device:

int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
WebSettings webSettings = this.bridge.getWebView().getSettings();
if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
  if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.Q) {
    webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
  }
}

This is a project with Capacitor 2.x, but this snippet of code might help to be integrated into future versions of Capacitor.

[nseb]

Found this plugin that fixes the problem but this should be working on core without any plugins.

https://github.com/robingenz/capacitor-android-dark-mode-support

Hi , but for the IOS ? , any solutions like your dev ?

[marcelklehr]

For me it depends on the device. On some devices it works on others it doesn't (all on Android 11)

[robingenz]

Found this plugin that fixes the problem but this should be working on core without any plugins.
robingenz/capacitor-android-dark-mode-support

Hi , but for the IOS ? , any solutions like your dev ?

This problem does not occur on iOS. Only on Android.

One simple solution is:

npm install @robingenz/capacitor-android-dark-mode-support
npx cap sync

No more steps are necessary.

[marcelklehr]

I'd be grateful if this could be fixed in core.

[lucas-labs]

Found this plugin that fixes the problem but this should be working on core without any plugins.
robingenz/capacitor-android-dark-mode-support

Hi , but for the IOS ? , any solutions like your dev ?

This problem does not occur on iOS. Only on Android.

One simple solution is:

npm install @robingenz/capacitor-android-dark-mode-support
npx cap sync

No more steps are necessary.

I was having the inverse situation (dark theme won't go away after setting dark theme off on Android).
@robingenz/capacitor-android-dark-mode-support worked.

[jcesarmobile]

The WebView now supports dark mode without native code changes, and match the theme of the app.

Capacitor apps use a dark theme by default, so all Capacitor apps will have dark mode enabled by default.

If you want to force light mode you can set a light theme by changing this line in res/values/styles.xml

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
to
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
or if you want it to automatically change based on the user setting you can use
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">

For Capacitor 4 we will change the default theme to use the DayNight so it changes automatically, but since the theme belong to the app and Capacitor doesn't change the user apps after creation, users that want automatic theme change will have to update the style as explained here.

We will also document the theme change step on the Capacitor 3 to 4 guide.

[marcusrognes]

It seems like i need to restart the app after changing the device settings for it to take effect, on windows and ios this updates the app theme immediately.
Anyone else having this issue?

[danielsogl]

I can report the same issue. I can change the theme in the app once anf when I want to change it back the new color theme is not applied. iOS works fine

[ViktorKim]

+1

[luisuribemoreira]

+2