Кастомизация тем в PrimeNG 20+

Я использую prime в angular и с не давних пор подход к темизации изменился.

Начнем с установки стандартной темы: Aura, Material, Lara или Nora.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
    provideAnimationsAsync(),
    providePrimeNG({ theme: { preset: Aura } })
  ],
};

Настройка темы

Утилита definePreset используется для настройки существующего пресета во время настройки PrimeNG. Первый параметр — это пресет, который нужно настроить, а второй — токены дизайна, которые нужно переопределить.

//mypreset.ts
import { definePreset } from '@primeng/themes';
import Aura from '@primeng/themes/aura';

const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{zinc.50}',
            100: '{zinc.100}',
            200: '{zinc.200}',
            300: '{zinc.300}',
            400: '{zinc.400}',
            500: '{zinc.500}',
            600: '{zinc.600}',
            700: '{zinc.700}',
            800: '{zinc.800}',
            900: '{zinc.900}',
            950: '{zinc.950}'
        },
        colorScheme: {
            light: {
                primary: {
                    color: '{zinc.950}',
                    inverseColor: '#ffffff',
                    hoverColor: '{zinc.900}',
                    activeColor: '{zinc.800}'
                },
                highlight: {
                    background: '{zinc.950}',
                    focusBackground: '{zinc.700}',
                    color: '#ffffff',
                    focusColor: '#ffffff'
                }
            },
            dark: {
                primary: {
                    color: '{zinc.50}',
                    inverseColor: '{zinc.950}',
                    hoverColor: '{zinc.100}',
                    activeColor: '{zinc.200}'
                },
                highlight: {
                    background: 'rgba(250, 250, 250, .16)',
                    focusBackground: 'rgba(250, 250, 250, .24)',
                    color: 'rgba(255,255,255,.87)',
                    focusColor: 'rgba(255,255,255,.87)'
                }
            }
        }
    }
});

export MyPreset;

И наконец переопределим стандартный прессет на созданный нами

import { ApplicationConfig , provideZoneChangeDetection } из  '@angular/core' ; 
import { provideRouter } из  '@angular/router' ; 
import { appRoutes } из  './app.routes' ; 
import { provideAnimationsAsync } из  '@angular/platform-browser/animations/async' ; 
import { providePrimeNG } из  'primeng/config' ; 
import customPreset из  './mypreset' ; 

export  const  appConfig : ApplicationConfig = { 
  providers : [ 
    provideZoneChangeDetection ({ eventCoalescing : true }), 
    provideRouter (appRoutes), 
    provideAnimationsAsync (), 
    providePrimeNG ({ theme : { preset : customPreset }}) 
  ], 
};

Если нам необходимо переопределить стили какого-то конкретного компонента это можно сделать как на примере ниже

import { definePreset } from '@primeng/themes';
import Aura from '@primeng/themes/aura';

const customPreset = definePreset(Aura, {
  components: {
    megamenu: {
      colorScheme: {
        light: {
          item: {
            color: '{purple.700}',
            focus: {
              background: '{purple.50}',
              color: '{purple.700}',
            },
          },
          dark: {
            item: {
              color: '{purple.700}',
            },
          },
        },
      },
    },
  },
  semantic: {
    primary: {
      50: '{purple.50}',
      100: '{purple.100}',
      ....
    },
    colorScheme: {
      ...
      },
      dark: {
       ....
      },
    },
  },
});

export default customPreset;