PrimeNG18 Beta: Dark mode selector not applied

[Szanik]

Describe the bug

Using the new primeng 18 beta 1 version. tailwindcss is installed like in the documentation and i am using the primeconfig like this:

 this.config.theme.set({
      preset: Noir,
      options: {
        prefix: 'p',
        darkModeSelector: '.my-dark',
        cssLayer: false
      }
    }
    );

now i am using in a normak div this class: bg-surface-0 dark:bg-amber-400

The div is always displayed in amber. Doesn't matter if the html has the class="my-dark" or not.

Interestingly. If I change the darkModeSelector to system and simulate the preferred-color-scheme with the dev console the colors are shown correctly.

Maybe a bug, or maybe I am using this wrong.

Also are there documentations on what css classes to use when using primeng? Or should one use the tailwindcss classnames?

thank you

Environment

primeng 18 beta 1 angular 18.2 tailwindcss-primeui: ^0.3.4 tailwindcss: "3.4.10

Reproducer

No response

Angular version

18.2

PrimeNG version

18.beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.15.0

Browser(s)

Edge 128

Steps to reproduce the behavior

No response

Expected behavior

No response

[hm-kynecto]

was just playing with this on angular 19 with tailwind and primeng v18 beta

this._primeConfig.theme.set({
      preset: Lara,
      options: {
        darkModeSelector: '.prime-dark-mode',
      },
    });

and then when I set my theme in my app I just listen for the changes

 const element = document.querySelector('html');
        if (this.config.scheme === 'light') {
          element?.classList.remove('prime-dark-mode');
        }
        if (this.config.scheme === 'dark') {
          element?.classList.add('prime-dark-mode');
        }

not doing auto in my app though

maybe some use to you @Szanik

[Szanik]

Yes, that code also works for me. I was wondering about this classes tho: bg-surface-0 dark:bg-amber-400 i have this classNames in a div.

only the bg-amber-400 is visible. doesn't matter if prime-dark-mode is set on the html or not. Maybe it's not the way to style a div in primeng18?

[github-actions[bot]]

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

[Szanik]

Sure here is a stackblotz link: StackBlitz

Hope that helps

P.S. can you also please update the issue tempalte to angular 18 in the future?

[Momme97]

Hi, I am also facing the exact same issue. The dark mode style applies correctly but the default style has no effect.

[Szanik]

@mehmetcetin01140 was the provided stackblitz any help?

[GitStorageOne]

Firefox 130.0.1. https://primeng.org (17.18.11) - Switching to dark theme works. https://v18.primeng.org/ (beta.2) - Switching to dark theme doesn't work (even after cleaning browser cache). (no issues with beta.1)

[Szanik]

if i put cssLayers to true it works. but then the styles of the primeng are lost. The theming docs didn't help me further, i might not understand how it all should work here

[Szanik]

I fixed the issue with this code from the docs: PrimeNG Tailwind

Still for me hard to grasp and what the problems here are. I think the documentation needs improvement or thewords "styled"/"unstyled" r misleading

import { PrimeNGConfig } from 'primeng/api;
import { Aura } from 'primeng/themes/aura';
@Component({...})
export class AppComponent() {
    constructor(private primengConfig: PrimeNGConfig) {
        this.primengConfig.theme.set({
            preset: Aura,
                options: {
                    cssLayer: {
                        name: 'primeng',
                        order: 'tailwind-base, primeng, tailwind-utilities'
                    }
                }
            })
        }
    }
}

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}

@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}

@GitStorageOne Please open a new issue because it's not realated to this one. btw FireFox 126 has the same issue

EDIT: Actually no, sorry. It helps tho. Changing is still possible from dark to light with the html class but the tailwindcss are uneffected. If i now additonially change, via the emulator, the preffered scheme now also the tailwindcss classes are correct

[Szanik]

i think its because i have edge on system and my system is dark, will update here more infos

[Szanik]

Two Solutions:

First: Add selector to the tailwind.config.js. But then the darkmode selector from PrimeNG needs to be .dark

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-primeui')],
}

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

Or Second:

use another darkmode Selector: darkMode: ['selector', '.prime-dark-mode'],

.prime-dark-mode can then be any selector u want. But then this also needs to be the name use put in for the config for the darkModeSelect Property. Got it from the Tailwind Docs