Css – angular material text color using themes

angularangular-material2csssassthemes

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.

Best Answer

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.

Related Topic