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.

[PHuhn]

The default PrimeNG dialog theming configuration is as follows:

import { DialogDesignTokens } from '../../../../types/dialog';

export default {
    root: {
        background: '{overlay.modal.background}',
        borderColor: '{overlay.modal.border.color}',
        color: '{overlay.modal.color}',
        borderRadius: '{overlay.modal.border.radius}',
        shadow: '{overlay.modal.shadow}'
    },
    header: {
        padding: '{overlay.modal.padding}',
        gap: '0.5rem'
    },
    title: {
        fontSize: '1.25rem',
        fontWeight: '700'
    },
    content: {
        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
    },
    footer: {
        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
        gap: '0.5rem'
    }
} as DialogDesignTokens;

My translation of the situation is that my override of theming configuration is limited to what is in the above default configuration. That is to say, since .dialog-header background is not in the default, therefore one needs to use SCC to configure the background values.

In my toggle of theming, I set the following data attribute in index.html:

<body data-color-scheme="light">

I use the data-color-scheme data attribute in the style.css. My style.css is as follows:

[data-color-scheme='light'] {
    ...
    .p-dialog-header {
        background: var(--p-primary-100, #fff );
    }
    .p-dialog-footer {
        padding: 0.75rem 1.25rem;
        background: var(--p-primary-100, #fff );
    }
}
[data-color-scheme='dark'] {
    ...
    .p-dialog-header {
        background: var(--p-primary-950, #11a );
    }
    .p-dialog-footer {
        padding: 0.75rem 1.25rem;
        background: var(--p-primary-950, #11a );
    }
}

I use a service to toggle the theme as follows:

  switchTheme(isDark: boolean): number {
    const _codeMethod: string = `${this.codeName}.switchTheme`;
    if ( isDark) {
      this._document.documentElement.classList.add( this._primeDark );
    } else {
      this._document.documentElement.classList.remove( this._primeDark );
    }
    // additionally set 'data-color-scheme' to the theme color
    const _theme = isDark ? 'dark' : 'light';
    this._isDarkTheme = isDark;
    const _documentBody = this._document.body;
    if( _documentBody !== null ) {
      this._renderer.setAttribute( _documentBody, 'data-color-scheme', _theme );
      console.log( `${_codeMethod}: New color theme: ${_theme}` );
      return 0;
    }
    console.warn( `${_codeMethod}: Failed to find: 'body' tag` );
    return 1;
  }