Themes not working in v19 with Angular v19

[almenke]

I have worked many hours on this and I cannot figure out how to get the themes working in v19. I just tested with a simple and every theme I throw at it, this button is still green. I think it falls back to no theme. Here is my current version setup in package.json

"dependencies": {
"@angular/animations": "^19.1.0",
"@angular/common": "^19.1.0",
"@angular/compiler": "^19.1.0",
"@angular/core": "^19.1.0",
"@angular/forms": "^19.1.0",
"@angular/platform-browser": "^19.1.0",
"@angular/platform-browser-dynamic": "^19.1.0",
"@angular/router": "^19.1.0",
"@primeng/themes": "^19.0.7",
"@tailwindcss/postcss": "^4.0.8",
"date-fns": "^4.1.0",
"ngx-spinner": "^19.0.0",
"postcss": "^8.5.3",
"primeicons": "^7.0.0",
"primeng": "^19.0.7",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},

Here is my app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { jwtInterceptor } from './_interceptors/jwt';
import { loadingInterceptor } from './_interceptors/loading';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Lara from '@primeng/themes/lara';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(withInterceptors([jwtInterceptor, loadingInterceptor])),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Lara,
options: {
darkModeSelector: 'none'
}
}
})
]
};

And here is my component
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxSpinnerComponent } from 'ngx-spinner';
import { ButtonModule } from 'primeng/button';
import { AccountService } from './_services/account.service';

@component({
selector: 'app-root',
imports: [ButtonModule],
template: '

',
styleUrl: './app.component.css'
})
export class AppComponent {
accountService = inject(AccountService)

}

I tried all my favorite AI helpers and also downgraded to 19.0.5 and 19.0.6 (both of those versions failed to render due to a auto focus error. Thanks in advance for your help.

[gzeeel]

Hello @almenke, I'm not sure if you're using TailwindCSS or not, but if you do, could you try setting the following config for providePrimeNG please ?

theme: {
     preset: Lara,
        options: {
          cssLayer: {
            name: 'primeng',
            order: 'tailwind, primeng'
          },
          darkModeSelector: 'none'
     }
}

[Eptick]

+1
Clean project setup not working.

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.1.0",
    "@angular/common": "^19.1.0",
    "@angular/compiler": "^19.1.0",
    "@angular/core": "^19.1.0",
    "@angular/forms": "^19.1.0",
    "@angular/platform-browser": "^19.1.0",
    "@angular/platform-browser-dynamic": "^19.1.0",
    "@angular/router": "^19.1.0",
    "@primeng/themes": "^19.0.9",
    "primeflex": "^4.0.0",
    "primeng": "^19.0.9",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.1.8",
    "@angular/cli": "^19.1.8",
    "@angular/compiler-cli": "^19.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.7.2"
  }
}

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
import {providePrimeNG} from 'primeng/config';
import Aura from '@primeng/themes/aura';


export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ]
};

[imaksp]

Hi, please share reproducer link, someone from community could help easily if link is provided.

[almenke]

I believe I have solved this. I was expecting that your themes like Lara would change the test button color. As I switched thru them nothing happened. So, I assumed that themes were not working on my setup. I went out and engaged with every AI engine I could to fix my setup. All of them took me down the same paths and all of them assumed the same thing that I did. I spent about a day before I decided that I would have to use the theme customization to get color settings to work more appropriately. If a primary button is supposed to look like your comment button below, not matter what theme I am using then you can ignore my issue. If it is supposed to be different according to these other themes, then yes, I have to dig deeper into themes and the answer you sent me here with maybe a conflict with Tailwindcss could be an issue. Thanks.

[almenke]

One more clue for me was when I grabbed your reference project, installed PrimeNg and did NOT have any Tailwindcss installed and it worked the same when I switched thru the themes. BTW, there must be something that is NOT understandable in your documentation because 5 different AI engines reacted the same way. I would assume they are all trained using your documentation.

[ratsey]

@almenke, your 'solution' is correct. There's not a huge difference between the styles, it's mostly spacing and design cues. You can test this easily by using the Stackblitz that Prime offers in their Playground: https://primeng.org/playground

The differences between Lara and Aura are very subtle, you'll see something more with Nora.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import Lara from '@primeng/themes/lara';
import Nora from '@primeng/themes/nora';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Nora,
      },
    }),
  ],
};

Lara

Aura

Nora