angulartypescriptthemesprimeng

Simple way to set color palette for PrimeNG 18/19 theme?


Here's my ApplicationConfig:

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura,
        options: {
          // I'd like something simple here, like:
          // palette: "sky"
        }
      }
    }),
    provideHttpClient()
  ]

The PrimeNG website lets you experiment with different palette (as well as different themes) through an interface like this:

PrimeNG palette/theme selector

The tooltip shows the palette I like is called "sky", but I can't find anything in the API description that tells me where (if anywhere) I can use that palette name as a simple parameter to change the palette I'm using.

Is there a simple way, like I've shown above or similar, to make a one-and-done selection of my desired primary color? Or do I have to create a custom preset like this:

const AuraSky = definePreset(Aura, {
  semantic: {
    primary: {
      50: '{sky.50}',
      100: '{sky.100}',
      200: '{sky.200}',
      300: '{sky.300}',
      400: '{sky.400}',
      500: '{sky.500}',
      600: '{sky.600}',
      700: '{sky.700}',
      800: '{sky.800}',
      900: '{sky.900}',
      950: '{sky.950}'
    }
  }
});

That's not too terrible, I must admit, but I'd still like to know of there's an more direct way to do this.


Solution

  • This code can be simplified like this:

    import {palette} from '@primeng/themes';
    
    const AuraSky = definePreset(Aura, {
      semantic: {
        primary: palette('{sky}')
      }
    });