Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark Mode Toggle: The default styeld primevue in v4 is unable to auto detect dark mode #5666

Closed
fu050409 opened this issue May 1, 2024 · 3 comments
Closed

Dark Mode Toggle: The default styeld primevue in v4 is unable to auto detect dark mode #5666

fu050409 opened this issue May 1, 2024 · 3 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@fu050409
Copy link

fu050409 commented May 1, 2024 •
edited

Describe the bug

The default styeld primevue in v4 is unable to auto detect dark mode.

The dark mode will be worked when the settings is:

app.use(PrimeVue, {
    theme: {
        base: PrimeOne,
        preset: Aura,
        options: {
            darkModeSelector: 'system',
        }
    }
 });

At this time, dark style is enabled if the system prefres theme is dark, but when i set darkModeSelector to other values like dark-mode, the dark classes
which startswith dark: are worked, but the default dark style is not enabled when label <html> or <body> has a class dark-mode.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template

PrimeVue version

4.0.0-beta.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 124.0.6367.91

Steps to reproduce the behavior

  1. Import primevue after primevue v4.0.0-beta.1 is installed
import PrimeVue from "primevue/config";
// @ts-ignore
import PrimeOne from "primevue/themes/primeone";
// @ts-ignore
import Aura from "primevue/themes/primeone/aura";
  1. Setup PrimeVue and use it
app.use(PrimeVue, {
  ripple: true,
  theme: {
    base: PrimeOne,
    preset: Aura,
    options: {
      prefix: "p",
      darkModeSelector: "system",
      cssLayer: false,
    },
  },
});

Expected behavior

The primevue dark style should work when dark-mode class is set to <html> or <body>.
@fu050409 fu050409 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 1, 2024
@mertsincan
Copy link
Member

PrimeVue does not add the dakMode class to any DOM element, it only creates selectors for style and variables. If you have implementations that depend on this class, you need to add that class to the dom element like Tailwind; https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection

Our doc; https://v4.primevue.org/theming/styled/#darkmodetoggle

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('< darkModeSelector >'')
} else {
  document.documentElement.classList.remove('< darkModeSelector >')
}

and addEventListener('change', ...)

Best Regards,

@fu050409
Copy link
Author

fu050409 commented May 3, 2024 •
edited

Thank you very much for your patience :).

I did create buttons in my page for adding and removing dark-mode classes to and from the <html> tags, however PrimeVue's Dark Mode styles didn't take effect when the dark-mode classes were added to <html>, I don't know if this is the expected result or if it's due to some stupid oversight on my part?

In other words, even though the dark-mode class has been set, I'm still seeing PrimeVue in light mode. But it looks like the default dark styles of PrimeVue is able to work when the selector is system.

@fu050409
Copy link
Author

fu050409 commented May 3, 2024

Well, I suddenly realized what my problem was, the dark mode selector in PrimeVue's config item needs to start with a . at the beginning, but I seem to have overlooked it, my mistake indeed.😅😅

I hope you'll forgive me for my recklessness. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mertsincan @fu050409