Android Dark-Mode could not be detected

[danielsogl]

The Capacitor WebView is unable to detect the media query @media (prefers-color-scheme: dark). When opening the app inside chrome without capacitor, the dark mode is working as expected.

Try out the ionic example inside the browser and then with capacitor: https://ionicframework.com/docs/theming/dark-mode

Steps to reproduce:

1. create a new Ionic app with Capacitor
2. c&p the dark-mode code from the Ionic docs: https://ionicframework.com/docs/theming/dark-mode
3. run the app on an Android 10 device or simulator
4. toggle the system dark-Mode

Link to sample project: https://ionicframework.com/docs/theming/dark-mode

[rossholdway]

Hi. I'm also seeing this issue. Running the latest webview (v77) on Android 10 it doesn't seem to support the prefers-color-scheme CSS media feature however it does if you open the same webapp in Chrome on the device.

[jcesarmobile]

Looks like it's a bug on Android or on the WebView, according to what I've read it should just work, but it doesn't. prefers-color-scheme is recognized, but has no-preference value.
As workaround you can add this code to the MainActivity.java that forces dark mode into the WebView if the device has dark mode enabled.

    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);
      }
    }

But you need to target SDK 29, which might cause other issues.
Also only works for dark value, not for light.

[msimkunas]

Fixed it myself by moving the code to an onStart method as seen in the example provided by @sean-perkins.

EDIT: this also works inside the onCreate method if you place the code after the this.init() call. Makes sense that the bridge is only available after proper initialization. Leaving this here in case anyone else stumbles upon this and is not well-versed in terms of Android development.

[ericgopak]

I used the code above in the onStart method, after this.init(). I didn't have much else in my MainActivity.java so I didn't have second thoughts about where to put the code 🙂

The missing android.content.res.Configuration import is suggested by Android Studio as a quick fix.

[stefanhk31]

This solution nearly works for me, but there's an issue on Android 10--see the incorrect button style on Android 10 (left) vs the correct style on Android 11 (right):

It's not elements, either. Here are two image resources that are the exact same:

Has anyone encountered something similar?

[JuanDeLeon]

@stefanhk31 Did you figure out what was causing it? I got that same behavior in an Android phone emulator using Android 10. But not in my Galaxy tablet, which has Android 10 as well. Loaded exactly the same code/app on both.

[stefanhk31]

@JuanDeLeon no, unfortunately I still haven't found the root cause of this. Perhaps it's exclusive to emulators?

[sean-perkins]

Adding to @jcesarmobile answer, we have used this solution for our needs:

Update MainActivity.java onStart method to include this:

@Override
    public void onStart() {
        super.onStart();
        // Android fix for enabling dark mode
        int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
        WebSettings webSettings = this.bridge.getWebView().getSettings();
        if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
            String userAgent = webSettings.getUserAgentString();
            userAgent = userAgent + " AndroidDarkMode";
            webSettings.setUserAgentString(userAgent);
        }
    }

Then in whatever implementation you are using prefers-color-scheme, add the following to handle detecting the appended user agent string:

// Android fix for enabling dark mode, see native implementation in MainActivity.java
if (window.navigator.userAgent.includes('AndroidDarkMode')) {
     // Apply dark theme or set theme css variables to dark
}

We used user agent so we could share the same code across web and "native" platforms and avoid targeting SDK 29.

[craneo2099]

This variable "this.bridge" where comes from??

[jcesarmobile]

In MainActivity.java, if it extends BridgeActivity, this.bridge will be available

[gnarrrl]

Thank you! This approach worked beautifully in my Quasar app - with an additional hook in onResume() and slight modifications to allow for changing themes.
window.navigator.userAgent is accessible from Vue, can be evaluated to set $q.dark properly and do all extra theming required.
The CSS based approach as outlined below did not work at all. The supposedly changed classList was never visible from within Vue, $q.dark.isActive remained unaffected, and custom theming was impossible.

MainActivity.java

package your.package.name;

import android.os.Bundle;
import android.content.res.Configuration;
import android.webkit.WebSettings;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  void syncDarkMode() {
    // Android "fix" for enabling dark mode
    // @see: https://github.com/ionic-team/capacitor/discussions/1978
    int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
    WebSettings webSettings = this.bridge.getWebView().getSettings();

    String darkMode = " AndroidDarkMode";
    if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
      String userAgent = webSettings.getUserAgentString();
      if (!userAgent.contains(darkMode)) {
        userAgent = userAgent + darkMode;
        webSettings.setUserAgentString(userAgent);
      }
    } else {
      String userAgent = webSettings.getUserAgentString();
      if (userAgent.contains(darkMode)) {
        userAgent = userAgent.replace(darkMode, "");
        webSettings.setUserAgentString(userAgent);
      }
    }
  }

  @Override
  public void onStart() {
    super.onStart();
    syncDarkMode();
  }

  @Override
  public void onResume() {
    super.onResume();
    syncDarkMode();
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
    }});
  }
}

In App.vue

import { Platform } from "quasar";
import { App } from "@capacitor/core";

export default {
  name: "App",
  created() {
    App.addListener("appStateChange", this.updateTheme);
  },
  methods: {
    updateTheme() {
      const dark = (() => {
        if (Platform.is.capacitor) {
          // Apply dark theme or set theme css variables to dark
          const dark = window.navigator.userAgent.includes("AndroidDarkMode");
          this.$q.dark.set(dark);
          return dark;
        } else {
          return this.$q.dark.isActive;
        }
      })();

      // ... apply theme based on dark
    }
  },
  watch: { 
    "$q.dark.isActive": { // covers !capacitor
      handler: "updateTheme",
      immediate: true
    }
  }
};

[vt-vaio]

Adding to @jcesarmobile answer, we have used this solution for our needs:

Update MainActivity.java onStart method to include this:

@Override
    public void onStart() {
        super.onStart();
        // Android fix for enabling dark mode
        int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
        WebSettings webSettings = this.bridge.getWebView().getSettings();
        if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
            String userAgent = webSettings.getUserAgentString();
            userAgent = userAgent + " AndroidDarkMode";
            webSettings.setUserAgentString(userAgent);
        }
    }

Then in whatever implementation you are using prefers-color-scheme, add the following to handle detecting the appended user agent string:

// Android fix for enabling dark mode, see native implementation in MainActivity.java
if (window.navigator.userAgent.includes('AndroidDarkMode')) {
     // Apply dark theme or set theme css variables to dark
}

We used user agent so we could share the same code across web and "native" platforms and avoid targeting SDK 29.

Getting this compile error:

MainActivity.java:50: error: cannot find symbol
        WebSettings webSettings = this.bridge.getWebView().getSettings();
                                      ^
  symbol: variable bridge

[jpike88]

Is there ANY WAY of overriding prefers-color-scheme on the web view without targeting a recent SDK?

[AlessandroFBK]

@sean-perkins Thank you for your solution, which works.
Nevertheless, I've defined some dark mode CSS inside a component which seems to be ignored on an emulator running the native app and works when an Android device is emulated using Chrome dev tool.

@media (prefers-color-scheme: dark) { ... }

[hinddeep]

If you want to dynamically listen to changes in the dark mode on android, you can use the plugin I've developed. In opposition to checking whether dark mode has been enabled during app launch, the plugin will allow you to listen to changes in the dark mode even while your app is running. Also, there is no need to target sdk 29. I've tested the plugin by targeting sdk 28 and it works fine.

https://github.com/hinddeep/ionicCapacitorDarkMode

[cmaas]

To make this a bit more complete, could you guys also post your preferred solution to handle the navigationBarColor when using dark mode in a Capacitor app? On my Samsung test device, the webview app will still run with a light navigation bar (not status bar!) even though the dark mode is enabled. One workaround would be to set the navigationBarColor programmatically:

if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
    // ...
    getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.colorNavbarDark));
}

How do you do it? Especially if the user disables the dark mode and you want to go back to the default system color?

(cc @sean-perkins @jcesarmobile )

[hinddeep]

To make this a bit more complete, could you guys also post your preferred solution to handle the navigationBarColor when using dark mode in a Capacitor app? On my Samsung test device, the webview app will still run with a light navigation bar (not status bar!) even though the dark mode is enabled. One workaround would be to set the navigationBarColor programmatically:

if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
    // ...
    getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.colorNavbarDark));
}

How do you do it? Especially if the user disables the dark mode and you want to go back to the default system color?

(cc @sean-perkins @jcesarmobile )

The plugin I've written is only responsible for notifying the web app of system wide color scheme changes. The rest needs to be handled within the web app. For instance, if you're using my plugin, you can set the color of Status Bar inside the "darkModeStateChanged" listener. You can alter the color of the statusbar by using the following Capacitor API:
https://capacitor.ionicframework.com/docs/apis/status-bar/

Inside the web app:
Plugins.DarkMode.addListener("darkModeStateChanged", (state: any) => {
if(state.isDarkModeOn)
{
// Dark mode is on. Apply dark theme to your app
StatusBar.setStyle({
style: StatusBarStyle.Dark
});
}
else
{
// Dark mode is off. Apply light theme to your app
StatusBar.setStyle({
style: StatusBarStyle.Light
});
}
if(state.supported == false)
{
// Dark mode is not supported by the platform
}
});
I hope this helps. Please let me know if you need more clarification.

[cmaas]

@hinddeep Thanks, but I'm talking about the navigation bar (Home, Back, Recent), not the status bar. I think this can be set in the Android theme. I just wonder what the "proper" way to do this would be.

[hinddeep]

Hey, sorry for the late reply. I was a bit busy with other projects. Thank you so much for bringing this to my notice. The color of the navigation bar had slipped past my radar. I've updated my plugin. The updated plugin will change the color of the navigation bar to black when the user switches to dark mode. Upon the activation of light mode, the change will be reverted. Please try the updated version of the plugin and let me know if it works for you.
https://www.npmjs.com/package/capacitor-dark-mode

[cmaas]

Hmm, the source for your plugin is not updated yet 🧐

[hinddeep]

done.

[selected-pixel-jameson]

Would be outstanding if this was referenced somewhere in the theme documentation so that you don't need to bang your head against the wall for a few hours instead of just having this hypothetical documentation that doesn't actually work on Android.

[mayankkataria]

Still facing this issue. Is there any workaround to dynamically change ionic theme from light to dark and vice versa?

[pascalkania]

due to problems with the FORCE_DARK_STRATEGY i have solved it as follows with evaluateJavascript(...):

    @Override
    public void onResume() {
        super.onResume();
        int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
        if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
                this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle(\'dark\', true);", null);
        } else {
            this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle(\'dark\', false);", null);
        }
    }

[jpike88]

There seems to be a plugin that addresses this issue now:

https://github.com/timbru31/cordova-plugin-android-dark-mode-support

Anyone tried it?

[eyecatchup]

Here's the complete MainActivity.java I came up with:

It combines the FORCE strategy (where supported) and a CSS class based fallback for pre Android 10.
Also, the additional onResume takes care of applying system settings changes after resuming the app.

package io.github.eyecatchup.example;

import android.os.Bundle;
import android.content.res.Configuration;
import android.webkit.WebSettings;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  void setDarkMode() {
    // Android "fix" for enabling dark mode
    // @see: https://github.com/ionic-team/capacitor/discussions/1978
    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) {
        // As of Android 10, you can simply force the dark mode
        webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
      }
      // Before Android 10, we need to use a CSS class based fallback
      this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle('dark', true);", null);
    } else {
      if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.Q) {
        webSettings.setForceDark(WebSettings.FORCE_DARK_OFF);
      }
      this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle('dark', false);", null);
    }
  }

  @Override
  public void onStart() {
    super.onStart();
    setDarkMode();
  }

  @Override
  public void onResume() {
    super.onResume();
    setDarkMode();
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
    }});
  }
}

[jlorenzoC]

Perfect solution! Just one more thing, you can add this method so the app will automatically change from light to dark when you toggle dark mode from the top drawer:

@Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    setDarkMode();
  }

So far pretty nice, but in this next video the text's color of the buttons in the dark theme, changes to white, whereas for the official theme of the warning solid ion-button ( that is how the browser renders it) the color of the text is black over the yellow background.

video_2021-10-15_21-10-18.mp4

[tolutronics]

Here's the complete MainActivity.java I came up with:

It combines the FORCE strategy (where supported) and a CSS class based fallback for pre Android 10. Also, the additional onResume takes care of applying system settings changes after resuming the app.

package io.github.eyecatchup.example;

import android.os.Bundle;
import android.content.res.Configuration;
import android.webkit.WebSettings;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  void setDarkMode() {
    // Android "fix" for enabling dark mode
    // @see: https://github.com/ionic-team/capacitor/discussions/1978
    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) {
        // As of Android 10, you can simply force the dark mode
        webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
      }
      // Before Android 10, we need to use a CSS class based fallback
      this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle('dark', true);", null);
    } else {
      if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.Q) {
        webSettings.setForceDark(WebSettings.FORCE_DARK_OFF);
      }
      this.bridge.getWebView().evaluateJavascript("document.body.classList.toggle('dark', false);", null);
    }
  }

  @Override
  public void onStart() {
    super.onStart();
    setDarkMode();
  }

  @Override
  public void onResume() {
    super.onResume();
    setDarkMode();
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
    }});
  }
}

This should be pinned as the solution

[chrisspiegl]

@eyecatchup Thank you for sharing your workaround.

Since I get issues with the plugins I have installed (and I'd rather not list them in the MainActivity.java file.

Does the onCreate give any specific benefit? I am not 100% clear why I would need to overwrite that one.

Thanks

[eyecatchup]

@chrisspiegl The onCreate override has nothing to do with dark mode.

In Capacitor 2.x, it is actually a required to step in your application to register your plugins to make Capacitor aware of them.
See the docs. Therefore Capacitor 2 (not sure about 3) generates the MainActivity.java with the given onCreate method (what you see is exactly what Capacitor 2 auto-generates).

Since I get issues with the plugins I have installed (and I'd rather not list them in the MainActivity.java file.

If you use Capacitor 2, maybe that's the reason for the issues with your plugins?
If you use Capactitor 3, you should be save to delete it, because plugins are loaded automatically.

[chrisspiegl]

@eyecatchup Thank you for these details. I am actually using Capacitor 3 and everything works fine without the onCreate so I removed it and am happy with all the rest of the script 👍.

Thank you for clearing this up 🌸.

[simultsop]

Just the needs to perform such tweaks makes you feel sad :S

[avalanche1]

Anything can make you sad - if you let it

[nunoarruda]

The evaluateJavascript solution did not work for me when cold-starting my app so I went with the user agent solution and it works fine now, even when cold-starting the app.

MainActivity.java:

package com.pulsegrow;

import android.content.res.Configuration;
import android.webkit.WebSettings;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  // Alternative for "prefers-color-scheme: dark" not working properly on Android
  // Adds "AndroidDarkMode" to user agent
  // @see: https://github.com/ionic-team/capacitor/discussions/1978
  void detectDarkMode() {
    int nightModeFlags = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
    WebSettings webSettings = this.bridge.getWebView().getSettings();
    String userAgent = webSettings.getUserAgentString();
    Boolean hasDarkModeString = userAgent.contains(" AndroidDarkMode");

    if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
      // Dark mode detected, add string to user agent if it's not added already
      if (!hasDarkModeString) {
        userAgent = userAgent + " AndroidDarkMode";
      }
    } else {
      // Light mode detected, remove string from user agent
      userAgent = userAgent.replace(" AndroidDarkMode","");
    }

    webSettings.setUserAgentString(userAgent);
  }

  @Override
  public void onResume() {
    super.onResume();
    detectDarkMode();
  }
}

JS:

if (window.navigator.userAgent.includes('AndroidDarkMode')) {
    // switch to dark mode
}

[riderx]

i created a PR to make it come to capacitor : #5483
thanks @eyecatchup for the work

[riderx]

I found out when changing dark mode from quick menu the theme was not updated,
i apply the fix, also on onWindowFocusChanged.

[robingenz]

Another very simple solution:

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

And it works 🎉

Plugin: @robingenz/capacitor-android-dark-mode-support

[riderx]

@robingenz thanks !
I have check your code, i don't see how you handle the change of the setting when the app is running ?
Do handleOnConfigurationChanged handle it ?
Maybe you can use handleOnResume for app switch.
For onWindowFocusChanged it's seems that not exposed into plugin :/

[robingenz]

Hi @riderx,

Do handleOnConfigurationChanged handle it ?

Yes, handleOnConfigurationChanged should handle this. For that reason, I don't need handleOnResume either.

[riderx]

Ok interesting,thanks i didn't know that !
i have update my PR to follow your idea, who is more the "capacitor" way.

i will use your plugin until that merged :)

[Frtrillo]

Having to install a plugin instead of fixing capacitor for android is kinda sad tho IMO.
On iOS capacitor and js prefer scheme colors works perfectly, but on android it doesnt

[nunoarruda]

@robingenz does that mean that your plugin @robingenz/capacitor-android-dark-mode-support is no longer needed? The prefers-color-scheme CSS feature will now work correctly on Android?

[robingenz]

@nunoarruda Yes, my plugin is no longer necessary and now deprecated (see https://github.com/capawesome-team/capacitor-android-dark-mode-support).

[Frtrillo]

@robingenz thanks, I changed that line to Theme.AppCompat.DayNight.NoActionBar and it works with the native OS night mode, but now I can't manually disable the dark mode within the app toggling the 'dark' class in body. If phone is on dark mode, it will keep dark mode no matter what

[robingenz]

@Frtrillo Interesting, I have not tested that. I will try that as well. Maybe this would be a reason to update my plugin to Capacitor 4. Thanks for pointing that out.

[Frtrillo]

@robingenz I recorded a little video: https://streamable.com/cs7nwk

Funny enough it does still works perfectly on chrome (mac os native dark/light OS switch), and manual toggle does work

But hey at least now android users wont find the app in dark mode everytime they open it just because.
I will probably upgrade capacitor as well to v4 after some testing next week