dialog.component.scss-theme.scss

@import '~@angular/material/theming';
@mixin dialog-component-theme($theme) {
    // retrieve variables from theme 
    // (all possible variables, use only what you really need)
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    .custom-dialog {
        .mat-dialog-container {
            // removing top padding, so that our title can take more space
            padding-top: 0px;
            .mat-dialog-title {
                // title has taken more space,
                // let's add some padding so that it's nicely viewed
                padding: 24px 24px 24px 20px;
                
                // as we have added extra padding,
                // we have to balance it out with negative margin,
                // so that it takes full width of container.
                margin-bottom: 0;
                margin-left: -24px;
                margin-right: -24px;
                
                // let's take mat-toolbar's default theme
                background-color: mat-color($background, app-bar);
                color: mat-color($foreground, text);
                
                // now, mat-toolbar's colored themes
                &[color=primary] {
                    @include _mat-toolbar-color($primary);
                }
                &[color=accent] {
                    @include _mat-toolbar-color($accent);
                }
                &[color=warn] {
                    @include _mat-toolbar-color($warn);
                }
            }
        }
    }
}