I'm not sure if this is the "correct" way to do it, but it works, so I'm running with it for now. I'll adapt if there's a better way. My goal was to be able to style non-Material elements (such as standard DIVs, SPANs, etc) with different colors depending on which Material theme was currently applied. It took a combination of Material 2 and Angular 2 elements to make it all work.
Here is what I did:
My custom theme file looks like this:
@import '~@angular/material/_theming.scss';
@include mat-core();
// default theme:
$primary: mat-palette($mat-blue,800);
$accent: mat-palette($mat-teal);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);
// "dark" theme
$dark-p: mat-palette($mat-blue-grey, 500);
$dark-a: mat-palette($mat-blue-grey,900);
$dark-t: mat-dark-theme($dark-p, $dark-a);
.darkTheme {
@include angular-material-theme($dark-t);
}
A snippet from my application scss file:
@import '../../themes/main-theme'; // <-- the theme file shown above
//default palette forground/background:
$light-foreground-palette: map-get($theme, foreground);
$light-background-palette: map-get($theme, background);
//dark palette forground/background:
$dark-foreground-palette: map-get($dark-t, foreground);
$dark-background-palette: map-get($dark-t, background);
.light-colors{
background-color : mat-color($primary, default);
color: mat-color($light-foreground-palette, text);
}
.dark-colors{
background-color : mat-color($dark-p, default);
color: mat-color($dark-foreground-palette, text);
}
In my "theme" service (although you could do it in any service, as long as it's available globally, or at least anywhere you need it), I defined a simple boolean variable isDarkTheme
. I use that to control display depending on whether the user has selected the "dark" theme.
Then wherever I need to, I use ngClass to apply classes dynamically, depending on the value of the global isDarkTheme
variable:
<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>
I have a div wrapping my entire application using the same ngClass
approach to either apply the darkTheme
class or not depending on the value of the isDarkTheme
variable. This take care of all Material-aware elements in my entire application in one shot, and I just use the light-colors
and dark-colors
on the specific non-Material elements where i need to. I could probably combine these, but for now I'm leaving things as-is.
For completeness, here are the lists of the elements you can get from the different palettes:
From the "primary" palette ($primary
and $dark-p
in my code above):
You can also get these same three color values for the $accent
and $warn
palettes.
From the "foreground" palette ($light-foreground-palette
and $dark-foreground-palette
in my code above):
- base
- divider
- dividers
- disabled
- disabled-button
- disabled-text
- hint-text
- secondary-text
- icon
- icons
- text
- slider-off
- slider-off-active
From the "background" palette ($light-background-palette
and $dark-background-palette
in my code above):
- status-bar
- app-bar
- background
- hover
- card
- dialog
- disabled-button
- raised-button
- focused-button
- selected-button
- selected-disabled-button
- disabled-button-toggle
Here are the sources I used to put this together:
I'll freely admit to only understanding about 80% of what's going on here, so if there's a better way, please let me know...
Indigo and green
It's working great on all the material design specfic stuff . Like button , toggle , card etc. But i want to change<h1>
text based on my app current theme. like if user choosed green theme thenh1
text color should change to green and so.. – Rahul