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!

[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.

[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.

[Tyler-V]

Created #289