theme returns to DARK after toggling in system settings

[benjaminbecker]

Environment

tns info
✔ Getting NativeScript components versions information...
⚠ Update available for component nativescript. Your current version is 6.3.3 and the latest available version is 6.8.0.
⚠ Update available for component tns-core-modules. Your current version is 6.5.1 and the latest available version is 6.5.13.
✔ Component tns-android has 6.5.3 version and is up to date.
✔ Component tns-ios has 6.5.2 version and is up to date.

Describe the bug This is a bug that shows during runtime. I performed the tests on Android_API 30.

To reproduce the bugs I need the following steps.

1. go to Android settings and enable "Dark Theme"

2. start my app (relevant code can be found below)

   My app forces the use of the light theme. This works at this time.

3. go to Android settings and disable "Dark Theme"

   Still, everything is OK in my app.

4. Android settings and enable "Dark Theme"

5. Maybe you have to repeat steps 3 and 4.

   Now my app uses the dark theme, although I force it to use the light theme.

Sample project My main component (App.vue) looks like this:

<template lang="html">
  <RadSideDrawer
    @loaded="forceLightTheme"
    ref="drawer"
    drawerLocation="Left"
    gesturesEnabled="true"
    :drawerTransition="transition"
    class="ns-light"
  >
    <StackLayout ~drawerContent backgroundColor="#ffffff" class="ns-light">
      <slot name="drawerContent"></slot>
    </StackLayout>
    <Frame ~mainContent ref="drawerMainContent">
      <slot name="mainContent"></slot>
    </Frame>
  </RadSideDrawer>
</template>

<script>
import { SlideInOnTopTransition } from "nativescript-ui-sidedrawer";
import Theme from "@nativescript/theme";

export default {
  data() {
    return {
      transition: new SlideInOnTopTransition()
    };
  },
  methods: {
    forceLightTheme() {
      Theme.setMode(Theme.Light);
    }
  }
};
</script>

<style scoped lang="scss">
// Start custom common variables
@import "~@nativescript/theme/scss/variables/blue";
// End custom common variables

// Custom styles
</style>

[raphaelguye]

+1

[Klunk75]

+1

[Tyler-V]

+1!

[NathanaelA]

Have you upgraded to the latest theme? This issue should have been fixed a while ago.

[Tyler-V]

To add more context @NathanaelA, I started a clean project and I am using "@nativescript/theme": "~3.0.1"

I have dark mode set on my phone, (Pixel 5, Android 11)

During the initial load (I am using @nativescript/angular) it displays correctly, however on subsequent webpack hot reloads it will then apply the dark theme.

I have tried the following,

1. Setting <item name="android:forceDarkAllowed">false</item> in styles.xml (values-v29 / values-v21)
2. Annotating class="ns-light" on <page-router-outlet>
3. Setting Theme.setMode(Theme.Light); manually on ngOnInit in the app component and main.ts
4. Adding the following snipplet to force it to disable night mode in main.ts

if (android) {
    on(launchEvent, (args: ApplicationEventData) => {
        androidx.appcompat.app.AppCompatDelegate.setDefaultNightMode(androidx.appcompat.app.AppCompatDelegate.MODE_NIGHT_NO);
    });
}

It will still appear in dark mode regardless on webpack reloads, not sure if this will be an issue when I go to production or not.

[NathanaelA]

So only during HMR it starts failing? But toggling it in settings won't cause it to fail?

[Tyler-V]

That's correct.

When you say "toggling it in settings" I did not turn dark mode on/off while the app was running, dark mode was set to on the entire time I was testing. Turning it off completely bypasses the issue but that's not a solution.

[NathanaelA]

Well this issue is for if you turn off and then on dark mode in settings. You end up with Dark mode theme activate, that issue should be fixed.

Your issue is HMR is somehow resetting back into dark mode which is a completely different issue... So that is why I was trying to find out if it also still occurs when you toggle it off, then on.

If your only issue is in HMR, I would recommend you create a new issue as it is not actually this issue.

[Tyler-V]

Created #289