PrimeNG Theming for inputgroup

I am updating an Angular project from Angular 17 to 19 and at the same time from PrimeNG version 17 to 19. This involves migrating to the new Theming structure introduced with PrimeNG 18.

So far as possible, I want to preserve our existing UI design.

We have an angular component which uses the PrimeNG p-inputGroup and p-inputGroupAddon elements, and looks something like this:



After updating to PrimeNG 19, it currently looks like this:



As a minimum I want to set the background color and the text color of the "addon" element.

I have defined a theme, which is basically working, and tried to specify the background color for the addon as follows:

export const MyTheme = definePreset(Lara, {
semantic: {
primary: {
...
}
},
components: {
...
inputgroup: {
addon: {
background: 'var(--p-primary-600)'
}
}
}
});


This doesn't work.

What wold be the right way to do this?

Continue reading...