Android NS7: unable to force light mode

[BlueHunter99]

Environment

• CLI: 7.0.8
• Android Runtime: 7.0.0
• @nativescript/core: 7.0.5
• @nativescript/angular: 10
• @nativescript/theme: 3.0.0

Describe the bug I am unable to force a light theme on Android. I have tried the following things:

• Use class="ns-light" on page-router-outlet
• Use <item name="android:forceDarkAllowed">false</item> in 'styles.xml'
• Use androidx.appcompat.app.AppCompatDelegate.setDefaultNightMode(androidx.appcompat.app.AppCompatDelegate.MODE_NIGHT_NO); in ngOnInit on the AppComponent and also in main.ts
• Use Theme.setMode(Theme.Light);

Switching my device to light mode does switch the app too. I have reproduced the bug in the Angular template app, with the updated @nativescript/theme package for NS7.

To Reproduce

1. Clone this repo.
2. ns debug android on a device with dark mode enabled

Expected behavior NS theme to show the app in light mode.

[rubenmeza]

Same issue here

Environment

• CLI: 7.0.9-rc.2
• Android Runtime: 7.0.0
• @nativescript/core: 7.0.7
• nativescript/theme: 3.0.0
• nativescript-vue 2.8.1

As a reference, I have been able to toggle the theme using Theme.toggleMode(), once the app already running, and if I get the theme mode using Theme.getMode() I get ns-light which is the correct theme I set, but the app loads the dark theme until I click a button with Theme.toggleMode() two times at that point the app shows the correct theme.

As a workaround, I have been able to set the Light theme in vue using Theme.toggleMode() on the mounted hook

new Vue({
  store,
  render (h) {
    return h(
      Menu,
      [
        h(DrawerContent, { slot: 'drawerContent' }),
        h(App, { slot: 'mainContent' })
      ]
    )
  },
  async mounted () {
    await Theme.toggleMode(false)
    await Theme.toggleMode(true)
    await Theme.toggleMode(false)
  }
}).$start()

[jamescodesthings]

+1

Haven't yet found a workaround on:

@nativescript/android@7.0.0
@nativescript/theme@3.0.0
@nativescript/angular@10.1.5

@BlueHunter99 Did you get the workaround working on a nativescript angular project?

[BlueHunter99]

@jamescodesthings this workaround seems to work on my end:

ngAfterViewInit(): void {
        if (isAndroid && Application.android.systemAppearance === "dark") {
            setTimeout(() => {
                Theme.toggleMode();
                Theme.toggleMode();
            }, 1000);
        }
    }

You can play with the timeout a bit, but as many things with NativeScript Angular this doesn't work without a timeout.

[jamescodesthings]

Cheers, appreciate it.

[jamescodesthings]

Still no joy for me, dumped the workaround in app.component.ts and had no joy. Then put it in one of the first rendered components and also got no difference.

Dropping back to @nativescript/theme@2.5.0 and using this in ngOnInit working for now:

if (isAndroid && Application?.android?.systemAppearance === "dark") {
    Theme.setMode(Theme.Light);
}

[timdoege]

Hm, is 2.5.0 NS7-compatible (I know the changes are probably minimal)?

In my Emulator, this seems to work when the app starts:

        if (isAndroid && Application.android.systemAppearance === "dark") {
            setTimeout(() => {
                Theme.toggleMode();
                setTimeout(() => {
                    Theme.toggleMode();
                }, 100);
            }, 100);
        }

(calling this in ngOnInit of app.component but maybe using a native lifecycle hook would be better). The two Toggles without a timeout worked "sometimes" (tm).

[losbeekos]

This works for me in main.ts with @nativescript/theme v3.0.0 and {NS} 7:

setTimeout(() => {
  Theme.setMode(Theme.Light);
}, 100);

It's a bit unfortunate that it doesn't work without the timeout though.

[BlueHunter99]

@losbeekos this works perfectly on my end, way better than my own workaround. I'm going to close this issue for now because it seems like a doable workaround.

@jamescodesthings let me know if you're still having trouble

[asciidiego]

@BlueHunter99 why do you close it if the issue is still there?

[timdoege]

Well, the workaround works ... mostly ... on a slow'ish Android 10 device, dark mode still shows up half of the time and might need a longer timeout than 100 ms, which then on faster devices looks weird, since the screen flickers from dark to light.

[jamescodesthings]

For me I still have odd behaviours with Theme.setMode but the workaround for this issue seems to work.

Rough summary of issues:

• (noticed on iOS, may be present on Android) On App resume the app reverts back to default Theme.
  • Workaround is to use the same workaround on resume.
• Theme doesn't correctly set on every component on the loaded view.
  • i.e. I have a class on my view hot-swapping images for dark/light mode. .ns-dark .ns-dark-show { visibility: visible; }
  • These don't appear to update on the loaded view.
  • Current workaround is to navigate to a blank page that has a "turning down the lights" message then back to where I was (not ideal but works).
  • Workaround is poor when combined with the first issue.
• Dark/Light mode system splash always shows (not looked for a workaround here yet).

I've not gotten to the bottom of the ideal here yet, I need another run of trying to fix these issues.

[BlueHunter99]

@diegovincent seems there are more issues with the workaround than I thought, I'll reopen it.

I don't have the know-how (or time) to chase down the bugs myself, so I hope one of the people in this thread can fix it. Maybe sometime in the future it will get support from the NativeScript TSC.

[NathanaelA]

This should be fixed in v2.3.4 -- please let us know if you still are having any issues.

[Lavhe]

Hi @NathanaelA

I am still having this issue on @nativescript/theme@3.0.1

[esh303]

Hey, here to get black theme to white theme in mobile app for my vivo android Just comment code follows below, which present in src/theme/variables.scss. It work for us. //@media (prefers-color-scheme: dark) .//........ //