Angular Material 17: How to get the currently used color from primary palette

125 Views Asked by At

I found a similar question but the solution does NOT include customizations like dark mode.

I have currently defined in the dark-theme.scss the following code


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

@include mat.core();

@mixin create-dark-theme() {
    @include mat.all-component-colors($dark-theme); // Apply dark theme colors
}
.dark-theme {
    @include create-dark-theme();
}

While for my primary in light mode I defined $primaryPalette: $lightIndigo

The suggested solution picks the name of the used palette, ie.

    color: mat.get-color-from-palette($primaryPalette, 'darker');

To my understanding I can only override $primaryPalette as long as I'm in the proper context, i.e. from the Theme. For this I have no clue how to achieve it. So, basically:

How to retrieve it from the currently used Theme?

0

There are 0 best solutions below