Using current Angular material theme colors in other css

Question

I am using custom themes in my app, which depending on the environment either uses dark or light theme (themes.css):

@use '@angular/material' as mat;

@include mat.core();

$myapp-light-theme-primary: mat.define-palette(mat.$indigo-palette, 700, 300, 900);
$myapp-light-theme-accent: mat.define-palette(mat.$pink-palette);
$myapp-light-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$myapp-light-theme: mat.define-light-theme((color: (primary: $myapp-light-theme-primary,
                accent: $myapp-light-theme-accent,
                warn: $myapp-light-theme-warn),
            typography: mat.define-typography-config(),
            density: 0,
        ));

$myapp-dark-theme-primary: mat.define-palette(mat.$light-blue-palette, A200);
$myapp-dark-theme-accent: mat.define-palette(mat.$light-green-palette, A200);
$myapp-dark-theme-warn: mat.define-palette(mat.$yellow-palette, A200);

$myapp-dark-theme: mat.define-dark-theme((color: (primary: $myapp-dark-theme-primary,
                accent: $myapp-dark-theme-accent,
                warn: $myapp-dark-theme-warn),
            typography: mat.define-typography-config(),
            density: 0,
        ));


// Apply the dark theme by default
@include mat.core-theme($myapp-light-theme);
@include mat.all-component-themes($myapp-light-theme);


// Apply the light theme only when the user prefers light themes.
@media (prefers-color-scheme: dark) {
    // Use the `-color` mixins to only apply color styles without reapplying the same
    // typography and density styles.
    @include mat.core-theme($myapp-dark-theme);
    @include mat.all-component-themes($myapp-dark-theme);
}

Now I want to style my snackbar notifications with these colors. This should work via the panelClass property of MatSnackBarConfig passed onto the alert. This basically, adds another class to the snackbar. Example I found suggested to add these definitions to the styles.css:

.custom-snackbar {
    .mat-mdc-snack-bar-container .mdc-snackbar__surface {
        border-radius: 8px !important;
    }

    .mat-mdc-button.mat-mdc-snack-bar-action {
        color: white !important;
    }
}

.snackbar-success {
    .mdc-snackbar__surface {
        background-color: green !important;
    }

    .mdc-snackbar__label {
        color: white !important;
    }
}

.snackbar-error {
    .mdc-snackbar__surface {
        background-color: red !important;
    }

    .mdc-snackbar__label {
        color: white !important;
    }
}

.snackbar-info {
    .mdc-snackbar__surface {
        background-color: var(--color-accent) !important;
    }

    .mdc-snackbar__label {
        color: white !important;
    }
}

.snackbar-warn {
    .mdc-snackbar__surface {
        background-color: yellow !important;
    }

    .mdc-snackbar__label {
        color: black !important;
    }

    .mat-mdc-button.mat-mdc-snack-bar-action {
        color: black !important;
    }
}

My problem is that I don't know how I can access the current primary/accent/warn colors of my theme? I can't use specifically dark or light theme colors, as some users will use one or the other. I was thinking that there must be a purely CSS way to get the current primary/accent/warn colors and use them to style the panel classes. How can I achieve this?

Answer 1

You can set those colors into variables and use them in other CSS files. Here is an example inspired by this answer. That answer did not work for me directly but the following did in the past:

// Apply the dark theme by default
@include mat.core-theme($myapp-light-theme);
@include mat.all-component-themes($myapp-light-theme);

:root {
    --color-primary: #{mat.get-color-from-palette($myapp-light-theme-primary, default)};
    --color-accent: #{mat.get-color-from-palette($myapp-light-theme-accent, default)};
    --color-warn: #{mat.get-color-from-palette($myapp-light-theme-warn, default)};
}

// Apply the light theme only when the user prefers light themes.
@media (prefers-color-scheme: dark) {
    // Use the `-color` mixins to only apply color styles without reapplying the same
    // typography and density styles.
    @include mat.core-theme($myapp-dark-theme);
    @include mat.all-component-themes($myapp-dark-theme);

    :root {
        --color-primary: #{mat.get-color-from-palette($myapp-dark-theme-primary, default)};
        --color-accent: #{mat.get-color-from-palette($myapp-dark-theme-accent, default)};
        --color-warn: #{mat.get-color-from-palette($myapp-dark-theme-warn, default)};
    }
}

I don't know if the function name changed in between but I had to dig into @use '@angular/material' as mat;, where I noticed get-color-from-palette. On another site I found that there is a default key (=500).

Now to use the colors, you only have to use the var function:

background-color: var(--color-primary);