How can I use Material Theme colors for custom things?

Question

I'm trying to use a specific (BACKGROUND) color from my theme to make other elements that color

What is the designed way to do that? Is there a designed way to do this?

For example, Is there a way to say this custom element should use the current theme's -> background -> disabled color? etc

I would love to be able to say, for example, this specific element should be whatever color the current theme's -> background palette's -> disabled-list-option.

Thanks!!

Answer 1

I think you want a .scss file where you put all your custom color variables and use them to generic CSSclass to apply all over your apps.

Then you need to do this things.

1. Uses a theme.scss file which holds current material theme/ dynamic themes scss

---

@import '~@angular/material/theming';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-deep-purple, 700, 600);
$mytheme-app-accent: mat-palette($mat-red, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-teal, 500);
    $mytheme-alt-accent: mat-palette($mat-orange, 500);
    $mytheme-alt-warn: mat-palette($mat-red);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}

.mytheme-another-alt-theme{
   $mytheme-another-alt-primary: mat-palette($mat-blue, 500);
    $mytheme-another-alt-accent: mat-palette($mat-yellow, 500);
    $mytheme-another-alt-warn: mat-palette($mat-green);
    $mytheme-another-alt-theme: mat-light-theme($mytheme-another-alt-primary, $mytheme-another-alt-accent, $mytheme-another-alt-warn);
    @include angular-material-theme($mytheme-another-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

2. Uses separate scss file to hold your custom css class

---

// Import all the tools needed to customize the theme and extract parts of it
@import "~@angular/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}

3. Now you can use your custom css classes over the app and don't forget to put the scss file link within your angular.json/angular-cli.json

---

You can also use this classes too:
.col-primary {
    & .hue {
      &-50 {
        color: mat-color($primary, 50) !important;
      }
      &-100 {
        color: mat-color($primary, 100) !important;
      }
      .
      .
      .
     &-800 {
        color: mat-color($primary, 800) !important;
      }
    }
 }

Also, you can see the running Example of this code here

Answer 2

I searched for reuse same color scss and came across this post, which I highly recommend so you can understand reusing values throughout your SCSS files, in order to make them more maintainable.

To sum it up, you can define SCSS variables by defining something like this:

$important-color: rgb(1, 2, 3);

And then reuse it like so:

class-1 {
    background-color: $important-color;
}

...

class-2 > span {
    color: $important-color;
}

So what you should probably do is to define one of these constants in a SCSS file higher up in the hierarchy (such as app.scss, for instance, if this is an application-wide variable) and use this variable in your components. Please, make sure to read Aloke's answer as well for a more in-depth analysis.

Always use the search, and be sure to include your code when asking code-related questions (use websites such as JSFiddle to make things easier).

Answer 3

The answer to THIS: question is actually what I was looking for: It was much easier than I thought:

.mat-option {
  color : mat-color($foreground, text);
}

Angular Material - change color of clicked mat-list-option

Answer 4

Why don't use Angular Material Theming built-in functionnalities ?

That way, you only have to create a custom Color Palette and affect it to either primary/accent/warn color (or use a pre-defined theme) with a bit of scss (to customize base colors)

Then the rest is done automatically by selecting the good color while using angular material components :

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>

In your components you can also use theses palettes quite easily if needed :

button {
    background-color: mat-color($accent);
}