Theming - Changing background color of dialog headers and footers

[PHuhn]

This week I updated my first app with the latest 19 both Angular and PrimeNG. I’m having difficulty in getting the theme completely configured. I’ve only found this article 'Dark theme switch in Angular with PrimeNG 18 and Tailwind', the PrimeNG Theming documentation and the PrimeNG source on github. I've had some progress, but I'm currently stuck on the setting the background and text colors of the dialog header and footer (see bottom of code). This is what I've placed in my app.component called from the constructor:

...
export class AppComponent extends BaseComponent {
  ...
  constructor(
    private _baseSrvc: BaseCompService,
    public _config: PrimeNG
  ) {
    super( _baseSrvc );
    ...
    this.setLocale( this._config, environment.locale );
  }
  setLocale( config: PrimeNG, locale: string ): void {
    ...
    const auraPreset = definePreset(Nora, {
      semantic: {
        primary: {
          50: '{blue.50}',
          100: '{blue.100}',
          200: '{blue.200}',
          300: '{blue.300}',
          400: '{blue.400}',
          500: '{blue.500}',
          600: '{blue.600}',
          700: '{blue.700}',
          800: '{blue.800}',
          900: '{blue.900}',
          950: '{blue.950}'
        },
        colorScheme: {
          light: {
            primary: {
              color: '{blue.500}',
              inverseColor: '#ffffff',
              hoverColor: '{blue.600}',
              activeColor: '{blue.700}'
            },
            highlight: {
              background: '{blue.500}',
              focusBackground: '{blue.500}',
              color: '{blue.50}',
              focusColor: '#ffffff'
            }
          },
          dark: {
            primary: {
              color: '{blue.50}',
              inverseColor: '{blue.950}',
              hoverColor: '{blue.100}',
              activeColor: '{blue.50}'
            },
            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)'
            }
          }
        },
      },
      components: {
        ...
        dialog: {
          colorScheme: {
            light: {
              root: {
                background: '{blue.50}',
                color: '{blue.950}',
              },
              header: {
                background: '{blue.300}',
              },
              footer: {
                background: '{blue.300}',
              }
            },
            dark: {
              root: {
                background: '{blue.800}',
                color: '{blue.50}',
              },
              header: {
                background: '{blue.900}',
              },
              footer: {
                background: '{blue.900}',
              }
            }
          }
        }
      }
    });
    config.theme.set({
      preset: auraPreset,
      options: {
        darkModeSelector: '.p-dark',
      },
    });
  }
}

I've created a StackBlitz working example, a variant of dialog docs. With this example, one can see that the content color has been changed to blue-50, but the header and footer was not changed to blue-100 as I have configured.