PrimeNG v18 - update theme, primaryColor, surfaceColor dynamically

[htdong]

Hello,

I’m trying to debug whether the following code is correctly updating the theme, primary color, and surface color. I mimicked the PrimeNG showcase in a new Angular app, but the changes don’t take effect. Despite following the documentation and inspecting the PrimeNG showcase source code, I haven’t been able to identify the issue.

All setup steps were done according to the documentation, and console.log confirms that the $t() function has the same input information as the PrimeNG showcase.

Here is the code snippet:

onPresetChange(event) {
this.updateConfig({ preset: event });
console.log('Preset:', event);

const preset = presets[event];
const surfacePalette = this.surfaces.find(
  (s) => s.name === this.selectedSurfaceColor(),
)?.palette;

if (this.selectedPreset() === 'Material') {
  document.body.classList.add('material');
  this.config.ripple.set(true);
} else {
  document.body.classList.remove('material');
  this.config.ripple.set(false);
}

const presetExt = this.getPresetExt();
console.log(event, preset, presetExt, surfacePalette);

$t()
  .preset(preset)
  .preset(presetExt)
  .surfacePalette(surfacePalette)
  .use({ useDefaultOptions: false });

}

[hdthefirst]

I'm encountering similar challenges while transitioning from Primflex to Tailwind CSS. While Tailwind is fantastic, theming PrimeNG in this version presents a big hurdle as it's new.

[j0rgedev]

Hello there! I may be wrong, but I guess you could look at this code from SakaiVue https://github.com/primefaces/sakai-vue/blob/master/src/layout/AppConfigurator.vue. I know it's PrimeVue, but I think it follows the same functionality for primeNG