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:
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.
This code can be simplified like this:
import {palette} from '@primeng/themes';
const AuraSky = definePreset(Aura, {
semantic: {
primary: palette('{sky}')
}
});