angular material text color using themes

Question

I am using angular material theme with primary and accent colors. I have two different themes defined orange and green that end user can change dynamically. the theme.scss looks like below

@import '~@angular/material/theming';

@include mat-core();

@mixin widget-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    .fa-icon {
      color: mat-color($primary);
    }

    .fa-table-data-row-selected {
        background-color: mat-color($accent) !important;
        color: #152A23
    }

    .fa-text-link {
        color: #2A5D9F;
    }
  }



$custom-primary: mat-palette($mat-blue-grey,500);
$custom-accent:  mat-palette($mat-light-blue, A200);
$custom-warn:    mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);
@include widget-theme($custom-theme);

//Orange theme
$ora-primary: mat-palette($mat-orange, 800);
$ora-accent:  mat-palette($mat-deep-purple, A100);
$ora-theme: mat-light-theme($ora-primary, $ora-accent);

.orange-theme {
    @include angular-material-theme($ora-theme);
    @include widget-theme($ora-theme);
}

//green theme
$green-primary: mat-palette($mat-green, 800);
$green-accent:  mat-palette($mat-lime, A700);
$green-theme: mat-light-theme($green-primary, $green-accent);

.green-theme {
    @include angular-material-theme($green-theme);
    @include widget-theme($green-theme);
}

My overall color scheme is working fabulous using primary and accent color. however, notice the usecase where i have a table and the selected row color is used using accent color with css fa-table-data-row-selected. The text color of the selected row is currently hard-coded. Obviously this will not work for all the accent colors and may look absolutely unreadable. So, this should also be changed depending dynamically depending upon what theme is picked.

What is the recommendation here? i cannot clearly use primary or accent color as that may not look the best. it probably need to be some other variable that can have a value depending upon what theme is picked.

Solution

Use the palette color's 'contrast' color:

color: mat-color($accent, default);

contrast-color: mat-color($accent, default-contrast);

For numeric hue keys, you can use mat-contrast instead of mat-color:

color: mat-color($accent, 500);

contrast-color: mat-contrast($accent, 500);

Knowing a little bit about the theming internals can be very useful.

Comments

[Vik]

mat-contrast($accent); doesnt work for me but the 2nd version does. 1st fails to compile

[John]

using default-contrast gives me another color than just default

[G. Tranter]

@John yes - default-contrast and default should be different colors.

[John]

Ok, you write that it is the same in your answer, so I got confused. Maybe I am reading it wrong. Thanks for the clarification though.

[GazB]

I don't believe that there is a default added to contrast so you have to specify say 500 e.g. mat-contrast($accent, 500) or use the mat-color($accent, default-contrast)

[Ross Rawlins]

do you still need to import core or variables?