Dialog: Modal mode changes background color in dark mode

[tmorgan497]

Describe the bug

When using dark mode (by setting a body class of p-dark) with tailwindcss, having a modal dialog causes the background surface colors to toggle back to light mode until the dialog is hidden. I am using styled mode in Primevue with the Aura preset.

Reproducer

https://github.com/tmorgan497/minimal-nuxt-primevuev4

PrimeVue version

4.0.0-rc.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Edge 127.0.2651.105

Steps to reproduce the behavior

No response

Expected behavior

No response

[tmorgan497]

Using the html tag instead of the body tag seems to resolve the issue (if it's an issue).

The toggleColorScheme() function changed from

function toggleColorScheme() {
    isDarkMode.value = !isDarkMode.value;
    if (isDarkMode.value) {
        document.body.classList.add("p-dark");
    } else {
        document.body.classList.remove("p-dark");
    }
    userStore.setDarkMode(isDarkMode.value);
}

to

function toggleColorScheme() {
  isDarkMode.value = !isDarkMode.value;
  window?.document.querySelector('html').classList.toggle('p-dark');
}

Sample on stackblitz: https://stackblitz.com/edit/github-cvahdj?file=layouts%2Fdefault.vue

[tugcekucukoglu]

Interesting. I checked the stackblitz that you have shared: https://stackblitz.com/edit/github-cvahdj?file=layouts%2Fdefault.vue but cannot replicate. It might be related how to call toggleColorScheme function.

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.