Primvue V4 Style Configuration : colorScheme Dark Surface Not Work as expected

[khaledOghli]

Describe the bug

surface Variables: Still Take the root variables for light and dark mode

semantic: {
colorScheme: {
light: {
surface: {
0: '#00ffff',
50: '{zinc.50}',
100: '{zinc.100}',
200: '{zinc.200}',
300: '{zinc.300}',
400: '{zinc.400}',
500: '{zinc.500}',
600: '{zinc.600}',
700: '{zinc.700}',
800: '{zinc.800}',
900: '{zinc.900}',
950: '{zinc.950}',
},
},
dark: {
surface: {
0: '#ff2',
50: '{slate.50}',
100: '{slate.100}',
200: '{slate.200}',
300: '{slate.300}',
400: '{slate.400}',
500: '{slate.500}',
600: '{slate.600}',
700: '{slate.700}',
800: '{slate.800}',
900: '{slate.900}',
950: '{slate.950}',
},
},
},
},

.

Reproducer

https://stackblitz.com/edit/nuxt-starter-dhgcfm?file=theme.js

PrimeVue version

4.0.0-rc.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome

Steps to reproduce the behavior

Go to the repro link:

https://stackblitz.com/edit/nuxt-starter-dhgcfm?file=theme.js

Expected behavior

No response

[blevinelrp]

Seems to be working as expected in your stackblitz example.

light

dark

Can you provide more details regarding where you think this is not working?

[vruello]

I think I have the same issue with 4.0.0-rc.2.

As I understand the new theming system, the Aura preset sets the fieldset background to content.background (https://github.com/primefaces/primevue/blob/master/packages/themes/src/presets/aura/fieldset/index.js). content.background is set to surface.0 in light color scheme (https://github.com/primefaces/primevue/blob/master/packages/themes/src/presets/aura/index.js#L272) and to surface.900 in dark color scheme (https://github.com/primefaces/primevue/blob/master/packages/themes/src/presets/aura/index.js#L394).

If I'm correct, in the example, the background of the fieldset should be #00ffff in light theme and --p-slate-900 (#0f172a) in dark theme. However, when you switch themes, the background color of the fieldset does not change.

The css variable --p-surface-0 seems to be updated (as you showed up), but for some reason it does not seem to update --p-fieldset-background.

[blevinelrp]

There is a bug in how "toggleTheme" is implemented. It should be the following:

const toggleTheme = () => {
  const element = document.querySelector('html');
  element.classList.toggle('p-dark');
};

That is why you aren't seeing the update when the theme "switches" (because it isn't currently switching).

[vruello]

Wow thanks! The documentation needs to be updated (https://primevue.org/theming/styled/#darkmodetoggle).

[khaledOghli]

There is a bug in how "toggleTheme" is implemented. It should be the following:

const toggleTheme = () => {
  const element = document.querySelector('html');
  element.classList.toggle('p-dark');
};

That is why you aren't seeing the update when the theme "switches" (because it isn't currently switching).

And that is the solution, Thanks man.
but really the documentation needs to be more clear.

[dxvgef]

There is a bug in how "toggleTheme" is implemented. It should be the following:

const toggleTheme = () => {
  const element = document.querySelector('html');
  element.classList.toggle('p-dark');
};

That is why you aren't seeing the update when the theme "switches" (because it isn't currently switching).

So far, I still can't switch between light and dark colors, according to the code in the documentation

[IceflowRE]

// change dark mode surface
updateSurfacePalette({ light: null, dark: darkPalette })
// change light mode surface
updateSurfacePalette({ light: lightPalette, dark: null })

This works for me.