LightMode can not be forced on Android if device is in dark mode

[codeBasePlusPlus]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.3.3
• Cross-platform modules: 6.3.2
• Android Runtime: 6.3.1
• iOS Runtime: 6.3.0
• Plugin(s): none
  • Devices: iPhone X 13.3 (in Dark Mode) Samsung Galaxy M20 Android 10 One UI Core 2.0 (in Dark Mode)

Describe the bug

tns create AppName --vue --appid com.something.app

info.plist

<key>UIUserInterfaceStyle</key>
<string>Light</string>

v29 -> style.xml

<item name="android:forceDarkAllowed">false</item>

app.js

template: `
        <Frame class="ns-light">
            <Home />
        </Frame>`,

Result:

To test the issue I did the javascript part by:

import Theme from "@nativescript/theme";

Theme.toggleMode(); // to toggle between the modes

As a mounted on Home.vue, can confirm it switches the iOS view to dark mode but not android.

Basically everything works perfectly on iOS, but on android if the device is in dark mode nothing I do it seems to be able to force it to light mode.

Android docs has this thing, but I don't know how to mirror it to Nativescript. https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate.html#MODE_NIGHT_NO

Stuff: app.scss

@import "~@nativescript/theme/core";
@import "~@nativescript/theme/default";

Home.vue

<style scoped lang="scss">
@import "~@nativescript/theme/scss/variables";

// Custom styles
.fas {
  @include colorize($color: accent);
}

.info {
  font-size: 20;
  horizontal-align: center;
  vertical-align: center;
}
</style>

Thank you,

[bundyo]

Try with the latest @next version (2.3.0-2020-01-13-101337-01) and let me know if it helps.

[codeBasePlusPlus]

Try with the latest @next version (2.3.0-2020-01-13-101337-01) and let me know if it helps.

ok:

tns update next

deleted sample project, created new one, then package.json

"@nativescript/theme": "2.3.0-2020-01-13-101337-01"

npm install

npm list @nativescript/theme

Result: └── @nativescript/theme@2.3.0-2020-01-13-101337-01

So we are good to go, same problem.

After a lot of fiddling it worked as such (upgrade to 2.3.0 is required didn't work before): for Android: v29->styles:

<item name="android:forceDarkAllowed">false</item>

app.js:

template: `
        <Frame class="ns-light">
            <Home />
        </Frame>`,

This is enough for iOS if you have the key but android no, if the device is in dark mode the app will be dark even though it thinks it is light, I tested this with Theme.getMode() and it returns ns-light. So you need to force it with JS, I did this in app.js for global scope but you can do this in your components if you want.

import Theme from "@nativescript/theme";

mounted() {
        Theme.setMode(Theme.Light);
 }

for iOS:

info.plist

<key>UIUserInterfaceStyle</key>
    <string>Light</string>

<Frame class="ns-light">

is enough for it behave however you want, but I guess a global force light wouldn't hurt on it either.

Thanks a bunch @bundyo big boss you can close this issue now. ♥