Components: Theming: get current theme colors

[Wykks]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Equivalent to https://material.angularjs.org/latest/api/service/$mdColors#mdcolors-getthemecolor-expression

What is the current behavior?

There is no proper way to get the current theme color.

What is the use-case or motivation for changing an existing behavior?

It's needed when you cannot use css, for example in canvas, or if you control color transition from/to theme color / custom color using d3.js

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 5.0.2

Is there anything else we should know?

There is a (ugly) workaround: create a theme service that add div with custom class to the dom and get the color.

[aloketewary]

@Wykks I think you can do such thing but in another way (sort of) for now. 😃
Like I do make custom component class in scss

//In my-theme.scss

@import '~@angular/material/theming';
@import 'my-custom-component-theme.scss';

// Primary theme
@include mat-core();
$app-primary: mat-palette($mat-blue-grey, 700, 600);
$app-accent: mat-palette($mat-pink, A200, 900, A100);
$app-warn: mat-palette($mat-deep-orange);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);
// Secondary Theme -- due to hue feature absent so this is also a work around for hue
.app-alt-theme {
    $app-alt-primary: mat-palette($mat-blue-grey, 500);
    $app-alt-accent: mat-palette($mat-pink, 500);
    $app-alt-warn: mat-palette($mat-deep-orange);
    $app-alt-theme: mat-light-theme($app-alt-primary, $app-alt-accent, $app-alt-warn);
    @include angular-material-theme($app-alt-theme);
}

// Using the $theme variable from the pre-built theme you can call the theming function
@include my-custom-component-theme($app-theme);

in my-custom-component-theme.scss

@import '~@angular/material/theming';
@mixin my-custom-component-theme($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.

    .my-individual-class {
        background-color: mat-color($accent, 600);
        opacity: 0.6 !important; //so, none can override it
    }
}

That's it. try it, I think it will work for now till feature coming.
Is that you want to say?

There is a (ugly) workaround: create a theme service that add div with custom class to the dom and get the color. @

[EdricChan03]

@aloketewary He was referring to how to get the theme color programmatically using Typescript code (not SCSS).

[jelbourn]

Until we're able to use css variables, the theming will remain a css/sass-only affair. Making the information available in the JS/TS would have negative payload size implications.

[ANLevant]

I'm trying to get the lighter and darker variands I specified on the theme definition. How do I do this?

[aloketewary]

As I added the code upper on one of them just use
mat-dark-theme(payloads) with mat-light-theme(...payloads)

[juanjinario]

Hi, i want get the main color of the LIGHT THEME or DARK-THEME, i have the following code in style.scss

$primary: mat-palette($mat-red);
$accent: mat-palette($mat-deep-orange, A200, A100, A400);
$warm: mat-palette($mat-yellow);
// $theme: mat-light-theme($primary, $accent, $warm);
$theme: mat-dark-theme($primary, $accent, , $warm);

And I want use the MAIN-COLOR of the DARK-THEME to use it in a custom style, ej:

div {
background: $MAIN-COLOR-DARK-THEME; // I want get the dark gray color to use Dark-Theme (#424242)
}

[gerardcarbo]

You have to use components theming functionality. For example to theme a 'th' you can do:

@mixin th-component-theme($theme) {
  // Extract the background color you need from the theme definition.
  $background: map-get($theme, background);
  $background-color:  map-get($background, background);

  // Define any styles affected in th.
  th {
    // Use mat-color to extract individual colors from a palette.
    background-color: $background-color;
  }
}

And then when defining yout theme:

// teal theme
$teal-theme-primary: mat-palette($mat-teal);
$teal-theme-accent: mat-palette($mat-orange);
$teal-theme-warn: mat-palette($mat-red);

$teal-light-theme: mat-light-theme($teal-theme-primary, $teal-theme-accent, $teal-theme-warn);
$teal-dark-theme: mat-dark-theme($teal-theme-primary, $teal-theme-accent, $teal-theme-warn);

.teal-theme {
  @include angular-material-theme($teal-light-theme);
  @include th-component-theme($teal-light-theme);
}

.teal-theme-dark {
  @include angular-material-theme($teal-dark-theme);
  @include th-component-theme($teal-dark-theme);
}

[Wykks]

@gerardcarbo You don't get it.
I was talking about getting theme colors in javascript/typescript.
Because when you use canvas, you simply cannot use class there. There's no dom.

[philly-vanilly]

@gerardcarbo This doesn't help at all if you work with a lib that expects a set of theming options, passed by JS/TS, e.g. by [input]="something" in your template.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}