Plugin to enable prefers-color-scheme on all platforms by enabling it in android

[rhysburnie]

Feature Request

The following can solve darkmode detection etc on android by simply making prefers-color-scheme work.

There is no need for an abstracted api because:

• @media (prefers-color-scheme: dark) and window.matchMedia('(prefers-color-scheme: dark)') already work perfectly fine in web and iOS.
• you can enable the same in android webView

Thus all the plugin needs to do is enable it in android and usage cann all be done via css media queries and/or matchMedia events

Plugin

Enables prefers-color-scheme detection in android's webView.

I have actuallly worked all this out in our app in the MainActivity.java.

I've created this issue to:

• offer to make plugin
• work out if this kind of plugin is possible

What I mean by this is:

A typical plugin would have a js api interface but this one doesnt need one because it just makes is so you can use prefers-color-scheme queries consistently everywhere.

Description

This relates to requests for darkmode support.
I found that none of the current community plugins fully support it and some dont install as they havent been maintained.
Regardless, they also abstract something that doesnt need to be abstracted. You can simply use css media queries or matchMedia to handle color scheme changes.

In our app we use window.matchMedia('(prefers-color-scheme: dark)') to detect scheme changes
This works consistently on iOS, web and now Android with the proposed plugin code.

My criteria of this to match iOS and web behaviour was it must:

• detect scheme as the app resumes
• detect scheme as options change via the system quick menu
• detects change as system timer changes os scheme

Platform(s)

Android - makes prefers-color-scheme work as expected

Preferred Solution

Enable prefers-color-scheme and matchmedia events by:

adding the required check onResume and onConfigurationChanged in android and forcing darkmode when appropriate using the feature that forces via the webViews prefers-color-scheme media

Nothing is required for iOS or Web

Documentation would guide user to simply use media queries and matchMedia as per w3c spec to handle darkmode needs.

Alternatives

Additional Context

[jcesarmobile]

see ionic-team/capacitor#4677 (comment)

[rhysburnie]

if this is the case what else is required?
As soon as I remove my fix and add the one as is described in #4677 <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
The prefers color scheme behaviour goes away.

Does it only work with a certain version of capacitor and above?
Does it only work with a certain version of android and above?

I no longer see:
my detection for support work
window.matchMedia('(prefers-color-scheme: dark)') remains the same on both night and day os mode
css @media (prefers-color-scheme: dark) styles dont come thru

[jcesarmobile]

It only works if you have the WebView up to date, don’t remember in which version chrome team implemented it, I think it was around version 90.
And only works on android 10 and newer, but I assume that was the case for the plugin too since android 10 is the first version that officially supported dark mode.

[rhysburnie]

OK thanks
I guess Ill stick with mine which is working for android 9 and above also
we cant simply rely that the end user has the latest webView

I did however test the new capacitor solution with simulator on API 30 and it wasn't working there either

We have one tester with an android device that did pickup support, but that was prior to me even finding our fix and at the time didn't have your recommended either. I was suspecting it also has to do with the actual webView version as you also suggest.
We have members of our team with android 10+ phones where it will only work with my fix.
Perhaps its dependant on the phones producer and that not all are shipping the webView required even when the OS version is 10+

[aparajita]

I can confirm that the media query + theme change is not working consistently.

[arnotixe]

Dark mode and WebView version comments:
My newly downloaded emulator (android studio) Nexus 5x API version 32 came with v92 but works after upgrading through play store (currently v104.0.5112.97)

Daily driver, Xiami with MIUI ( :/ ) always worked (and had webview v104.0.5112.69 but unsure since when)

My samsung android 9 tablet doesn't work, has v74.0.3729.136 but the bigger problem there is Settings|Apps states that WebView is Disabled and I can't figure out how to enable it (does not obey adb shell "pm enable com.google.android.webview", the enable button is disabled in Settings… :P )

[aparajita]

Hey folks, don't beat your head over this. Just use my dark mode plugin. Guaranteed to work on any Android system that supports dark mode, and supports user dark mode setting on all systems.

[arnotixe]

aparajita, saying "guaranteed" seems very optimistic to me 😄 , but I can confirm your plugin worked at first try in my ionic6+angular14+capacitor4 app both web, android and ios!

npm i @aparajita/capacitor-dark-mode
variables.scss rebuilt to :

// @media (prefers-color-scheme: dark) {
//  body {
//    --fv-gradient-bottom-color: #383838;
//    ...

//     became:

body.dark {
  --fv-gradient-bottom-color: #383838;
  ...

app.component.ts:

import { DarkMode } from '@aparajita/capacitor-dark-mode';
…
constructor(…) {
    DarkMode.configure({
      syncStatusBar: true,
    });
}

💥 worked in web, ios and android (even on the tricky old samsung android 9 with unInstallable Webview 🥳 )

[aparajita]

It is guaranteed to work on any system that supports dark mode because I'm getting the current mode directly from the system and not relying on WebView working correctly.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.