Scoped Design Tokens don't apply correctly in dark mode

[tpt-ldelay]

Describe the bug

After updating PrimeVue from v4.3.7 to v4.4.1, our design tokens don't apply correctly anymore.
In dark mode:

• the component displays the light mode values
• all the other instances of the same component (with no dt) display the dark mode colors

The darkModeSelector we use for the app is [color-theme=dark].
Inspection of the produced CSS shows the created component selector for dark mode is

:root[color-theme=dark], :host[color-theme=dark][pc42],
:root[color-theme=dark], :host[color-theme=dark] [pc42]  {}

which explains the values being applied to all the components but the one concerned.

I had to dig a bit to reproduce the bug on stackblitz so I found the bug is caused by an update of primeuix and more exactly the one adding the support of the :host pseudo-class.
Using an attribute as darkModeSelector produces unexpected results.

I could locate the code responsible for this in the styled package of primeuix, in the file themeUtils.ts.

• getColorSchemeOption tries to resolve our selector (line 160)
• selector is detected as 'attr' thus giving the ":root, :host" result (line 17)
• result is concatenated to the component id attribute by getSelectorRule in transformCSS (line 340)

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/v2pp6mzf-xy6dkrfs?file=package.json

Environment

Any

Vue version

3.5.26

PrimeVue version

4.4.1

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. In the reproducer, the 3rd table should appear with green header cells
2. click on the dark mode toggle
3. the 3rd table keeps the green color and the other 2 now have red header cells

I used DataTables as its the component that had showing the bug but it happens with all components

Expected behavior

When switching to dark mode:

• 3rd table should have red header cells
• default table should not change color