Skip to content

App is changing from Light to Dark Theme after Webpack HMR #289

@Tyler-V

Description

@Tyler-V

Environment
image

Describe the bug
I am trying to ensure the app remains in light mode. When I am debugging I set my phone settings to enable dark mode. I then debug the app and initially it appears in light mode however when webpack reloads on a change during development, it then appears to apply the dark theme.

To Reproduce

  1. Turn dark mode on in the phone settings
  2. ns debug android on my connected Pixel 5 (Android 11)
  3. Change text in a component to trigger HMR
  4. App reloads and appears in the dark theme

image

Expected behavior
Dark mode should remain disabled and the ns-dark theme should not apply.

Additional context
I have tried the following to ensure dark mode does not apply, none prevent the app from changing from light to dark on HMR.

  1. Setting <item name="android:forceDarkAllowed">false</item> in styles.xml (values-v29)
  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);
    });
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions