Why the Dark Mode is not working in PrimengV18

[siva-geddada]

When i am trying to Change the Light and Dark mode. it applying to the Components but not to the Application background. How can i fix it
@melloware tandraschko @cagataycivici @onursenture
AppComponent.ts
`import { Component, inject } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { RouterOutlet } from '@angular/router';
import { Lara } from 'primeng/themes/lara';
@component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, ButtonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
title = '18Prac';
text: any = '';

config: PrimeNGConfig = inject(PrimeNGConfig);
constructor() {

this.config.theme.set({
  preset: Lara,
  options: {
    darkModeSelector: '.p-dark',
    cssLayer: {
      name: 'primeng',
      order: 'tailwind-base, primeng, tailwind-utilities'
  }
  },
});

}

toggleDarkMode() {
const element = document.querySelector('html');
if (element) {
element.classList.toggle('p-dark');
}
}
}
`
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
};

AppComponent.html

`
<p-button label="Toggle Dark Mode" (onClick)="toggleDarkMode()"/>

`

[tandraschko]

please dont ping me here, im not working on PrimeNG, nor do i offer private support here ;D

[melloware]

Same for me I am not working on PrimeNG, nor do i offer private support here 😄

[qwadrox]

@siva-geddada Hi!

PrimeNg-s theme won't affect the styles other than component styles in your application. You must add your styles if you want to style the background:

/* For light mode */
html, body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark mod3 */
html.p-dark{
  background-color: #1a1a1a;
  color: #f0f0f0;
}

PrimeNg also changes the color-scheme property, which affects the browser's default styles. In most browsers, that would change the background to dark. In your case, I would look into how the dark mode should work in the tailwinds. Maybe tailwindcss resets this default behavior.