Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 491
kshetline Avatar asked Nov 16 '25 18:11

kshetline


1 Answers

This code can be simplified like this:

import {palette} from '@primeng/themes';

const AuraSky = definePreset(Aura, {
  semantic: {
    primary: palette('{sky}')
  }
});
like image 109
Cédric K. Avatar answered Nov 18 '25 06:11

Cédric K.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!