I'm trying to set my custom theme in Angular Material. My problem is when i want to import mixin angular-material-theme, i'm getting this error:
ERROR in
./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss
Module build failed: undefined
^
Argument $map of map-get($map, $key) must be a map
Backtrace:
node_modules/#angular/material/_theming.scss:1166, in function map-get
node_modules/#angular/material/_theming.scss:1166, in function mat-color
node_modules/#angular/material/_theming.scss:1325, in mixin mat-option-theme
node_modules/#angular/material/_theming.scss:3739, in mixin mat-core-theme
node_modules/#angular/material/_theming.scss:3808, in mixin angular-material-theme
stdin:12
in E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\#angular\material_theming.scss
(line 1166, column 11)
My sass code:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
#import '~#angular/material/_theming.scss';
#include mat-core();
$primary: mat-pallete($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);
$app-theme: mat-light-theme($primary, $accent, $warn);
#include angular-material-theme($app-theme);
Just a typo that's all, that's why it doesn't map to a color and you're getting that error (you have pallete instead of palette). Should be:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
#import '~#angular/material/_theming.scss';
#include mat-core();
$primary: mat-palette($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);
$app-theme: mat-light-theme($primary, $accent, $warn);
#include angular-material-theme($app-theme);
Related
i am using angular material and a bit lost at theming. I am using the prebuilt indigo-pink theme which is included in my styles.scss as below
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Based on the doc i created a new file called theme.scss and included it in the angular.json after styles.scss. The theme.scss looks like below
#import '~#angular/material/theming';
#include mat-core();
$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);
#include angular-material-theme($sg-app-theme);
My Requirement
I just need to change default font color to white rather black everywhere. I dont need to change anything else at all. I have copied the primary and accent pallete just from example. so feeling even they are not required to be changed.
I believe this post answers your question: https://stackoverflow.com/a/46157803/10730815. Basically, you need to build a custom foreground map and merge it into your theme. Combining your code snippet and the ones in the post above gives something like this for your styles.scss:
#import '~#angular/material/theming';
#include mat-core();
$sg-app-primary: mat-palette($mat-indigo);
$sg-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);
#function my-mat-light-theme-foreground($color) {
#return (
base: $color,
divider: $white-12-opacity,
dividers: $white-12-opacity,
disabled: rgba($color, 0.38),
disabled-button: rgba($color, 0.38),
disabled-text: rgba($color, 0.38),
hint-text: rgba($color, 0.38),
secondary-text: rgba($color, 0.54),
icon: rgba($color, 0.54),
icons: rgba($color, 0.54),
text: rgba($color, 0.87),
slider-off: rgba($color, 0.26),
slider-off-active: rgba($color, 0.38),
slider-min: rgba($color, 0.38)
);
};
$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));
#include angular-material-theme($my-app-theme-custom);
/* For the non-Angular Material items */
body {
color: white;
}
There are utility functions where you can pass in only a few of the necessary palettes such as primary, accent and warn and it will include background and foreground colors for you.
These functions can also be found in the scss provided by angular material file and if imported can be used when creating you theme configurations.
Here they are for reference so you can see how they automatically include the foregrounds and backgrounds for light and dark themes. Such awesome work by them.
#function _mat-create-light-color-config($primary, $accent, $warn: null) {
#return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, mat-palette($mat-red)),
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
);
}
#function _mat-create-dark-color-config($primary, $accent, $warn: null) {
#return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, mat-palette($mat-red)),
is-dark: true,
foreground: $mat-dark-theme-foreground,
background: $mat-dark-theme-background,
);
}
"#angular/material": "^6.2.1"
Got quite stuck with a very minor issue.
Can't import any standard material color in any of my app's css/scss files, including styles.scss
example:
$app-panel-green: mat-color($mat-green);
gives this error in any scss file:
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed:
$app-panel-green: mat-color($mat-green);
^
Undefined variable: "$mat-green".
in /**********/src/styles.scss (line 1, column 29)
styles.scss consits only of (except previous):
#import "~#angular/material/prebuilt-themes/deeppurple-amber.css";
/*#import './theme.scss';*/
body { margin: 0; }
and pre-built theme works just fine.
I don't even need a custom theme, just want to use material color palette.
If you want to use one of default palettes, you can do it like this:
#import '~#angular/material/theming'; // Pay attention on the path
#include mat-core();
$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
#include angular-material-theme($candy-app-theme);
And don't forget to include the file with your theming to .angular-cli.json to styles section.
Looking at the Angular Material documentation, they recommend using a -theme file per component to manage applying any theme-related styles to a specific class.
From my perspective, some downsides to this approach are:
quite verbose
splits up the style into two different locations
all your frontend devs need to understand how Angular Material colours work
makes it harder to change values (e.g. we might've been using mat-color($primary, 200) for border colours and now want to change it to mat-color($primary, 300). This will have been repeated all throughout the codebase.
Given a consistent design language, there will only be a subset of colors that will be used (e.g. 4 colors from the primary palette, 3 from the accent palette, a few different foreground / background colors, etc).
Given the above, doesn't it make more sense to have a _colors.scss that defines the exact colors using the theme rather than hoping developers extract the correct value from the theme each time?
e.g. maybe something like:
$clr-primary-default: mat-color($primary);
$clr-primary-contrast: mat-color($primary, default-contrast);
$clr-primary-light: mat-color($primary, lighter);
$clr-primary-dark: mat-color($primary, darker);
$clr-accent-default: mat-color($accent);
$clr-accent-light: mat-color($accent, lighter);
$clr-accent-dark: mat-color($accent, darker);
$clr-default-text: mat-color($foreground);
$clr-secondary-text: mat-color($foreground, secondary-text);
//etc
Then rather than creating a separate -theme file for each component that requires specific colors, I can simply import the colors.scss file and use the variables directly in the *.component.scss file.
Just wanting to validate that the above is sound and that I'm not missing anything obvious that's going to cause pain down the track?
The other tricky part is how to actually define these in a separate colors file efficiently given the file will need access to the theme data.
Why use #mixin?
Just wanting to validate that the above is sound and that I'm not missing anything obvious that's going to cause pain down the track?
The only thing, I can think of, is that you would miss the opportunity to use multiple themes in one application. With the approach from the Angular Material documentation, you would have a #mixin for each component, that you can #include multiple times with different $theme variables.
Example from https://medium.com/#tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1:
.default-theme {
#include angular-material-theme($theme);
#include custom-component-theme($theme);
}
.light-theme {
#include angular-material-theme($light-theme);
#include custom-component-theme($light-theme);
}
This wouldn't work, if you import colors as scss-variables into your components and use it there.
Separate file for colors
The other tricky part is how to actually define these in a separate colors file efficiently given the file will need access to the theme data.
This is actually pretty straight forward: I have a separate file src/styles/_variables.scss that contains my custom colors as scss-variables and also the $theme variable, that I am using later in src/theme.scss.
#import '~#angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-blue, 800, 500, 900);
$accent: mat-palette($mat-blue, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
// Custom colors
$custom-colors: (
custom-color-a: mat-color($mat-green, 700),
custom-color-b: mat-color($mat-red, 400),
);
$theme: map-merge($theme, (custom-colors: $custom-colors));
To import my _variables.scss inside a component, I have to add stylePreprocessorOptions to the angular.json file:
"styles": [
"src/styles.scss",
"src/theme.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
Now I can import my variables in all scss-files of my components:
#import 'variables';
.custom-class-a {
background-color: map-get($custom-colors, custom-color-a);
color: map-get($custom-colors, custom-color-b);
}
Why do I use a sass-map and map-merge?
As you noticed, I collect my custom colors in the sass-map $custom-colors and merge them into my $theme variable. This way I could either use my custom colors by directly importing it into my components style sheet (as described above) or I could use them inside my components #mixin the way it is described in the Angular Material documentation.
#import '~#angular/material/theming';
#mixin custom-component-theme($theme) {
$custom-colors: map-get($theme, custom-colors);
.custom-class-a {
background-color: map-get($custom-colors, custom-color-a);
color: map-get($custom-colors, custom-color-b);
}
}
Maybe this combination is a way that your frontend devs could work with?
I have defined primary,accent and warn colors as css custom variables in the styles.css file like so:
#import "~#angular/material/theming";
#include mat-core();
$my-primary: mat-palette($mat-blue-grey);
$my-accent: mat-palette($mat-amber, A200, A100, A400);
$my-warn: mat-palette($mat-deep-orange);
$my-2-primary: mat-palette($mat-pink, 400, 200, 600);
$my-2-accent: mat-palette($mat-blue, A200, A100, A400);
$my-2-warn: mat-palette($mat-deep-orange, 500, 300, 700);
.dark-theme {
$my-theme-dark: mat-dark-theme($my-primary, $my-accent, $my-warn);
#include angular-material-theme($my-theme-dark);
$primary: mat-color($my-primary);
$accent: mat-color($my-accent);
$warn: mat-color($my-warn);
$fg_palette:map-get($my-theme-dark, foreground);
$bg_palette:map-get($my-theme-dark, background);
$fg:map-get($fg_palette, text);
$bg:map-get($bg_palette, background);
--primary: #{$primary};
--accent: #{$accent};
--warn: #{$warn};
--fg: #{$fg};
--bg: #{$bg};
}
.dark-theme-2 {
$my-2-theme-dark: mat-dark-theme($my-2-primary, $my-2-accent, $my-2-warn);
#include angular-material-theme($my-2-theme-dark);
$primary: mat-color($my-2-primary);
$accent: mat-color($my-2-accent);
$warn: mat-color($my-2-warn);
$fg_palette:map-get($my-2-theme-dark, foreground);
$bg_palette:map-get($my-2-theme-dark, background);
$fg:map-get($fg_palette, text);
$bg:map-get($bg_palette, background);
--primary: #{$primary};
--accent: #{$accent};
--warn: #{$warn};
--fg: #{$fg};
--bg: #{$bg};
}
And used these variables in any of my components like so:( in my-custom-component.scss)
.some-class {
color: var(--primary)
}
.another-class {
background-color: var(--bg)
}
.yet-another-class {
border-color: var(--accent)
}
By doing like this, i can change any value related to color in any component, because these variables are global (defined in styles.css)
As i change theme, these colors also change according to new theme's color
I am working on a project where I used the Material 2 Themes and I used this approach where I use the class name and add colors class globally.
This is what I did :
FileName: mytheme-sidemenu.scss:
// 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;
}
}
Here is my main theme file:
mytheme-theme.scss:
#import '~#angular/material/theming';
#import './variables/helper.scss';
#import './variables/spacemanager.scss';
#import './mytheme-sidemenu.scss';
// Primary theme
#include mat-core();
$mytheme-app-primary: mat-palette($mat-light-blue, 700, 600);
$mytheme-app-accent: mat-palette($mat-pink, 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-blue-grey, 500);
$mytheme-alt-accent: mat-palette($mat-pink, 500);
$mytheme-alt-warn: mat-palette($mat-deep-orange);
$mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
#include angular-material-theme($mytheme-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
#include mytheme-sidemenu($mytheme-app-theme);
and in app.module.ts update this :
export class AppModule {
constructor(
#Inject(OverlayContainer) private overlayContainer: OverlayContainer
) {
this.overlayContainer
.getContainerElement()
.classList.add("mytheme-alt-theme"); // this for double theme add to the root css class
}
}
I am using angular 5 material and i created a theme.scss as below
theme.scss
#import '~#angular/material/theming';
#include mat-core();
$custom-primary: mat-palette($mat-deep-purple,600);
$custom-accent: mat-palette($mat-lime, 100);
$custom-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
#include angular-material-theme($custom-theme);
// ALTERNATIVE THEME
$alt-primary: mat-palette($mat-yellow);
$alt-accent: mat-palette($mat-grey, 200);
$alt-theme: mat-dark-theme($alt-primary, $alt-accent);
.alternative {
#include angular-material-theme($alt-theme);
}
I have my default styles.scss as below
style.scss
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.fa-icon-nav {
color: #507889;
font-size: x-large;
}
The color is currently hardcoded in the fa-icon-nav. I want it to use primary color from the currently selected theme. Please advise how this would work if possible? Happy to hear if this is totally the wrong way to do it and how it should be done.
EDIT:
ADDED ONLINE DEMO
I am working on a project where I used the Material 2 Themes and I used this approach where I use the class name and add colors class globally.
This is what I did :
FileName: mytheme-sidemenu.scss:
// 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;
}
}
Here is my main theme file: mytheme-theme.scss:
#import '~#angular/material/theming';
#import './variables/helper.scss';
#import './variables/spacemanager.scss';
#import './mytheme-sidemenu.scss';
// Primary theme
#include mat-core();
$mytheme-app-primary: mat-palette($mat-light-blue, 700, 600);
$mytheme-app-accent: mat-palette($mat-pink, 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-blue-grey, 500);
$mytheme-alt-accent: mat-palette($mat-pink, 500);
$mytheme-alt-warn: mat-palette($mat-deep-orange);
$mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
#include angular-material-theme($mytheme-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
#include mytheme-sidemenu($mytheme-app-theme);
and in app.module.ts update this :
export class AppModule {
constructor(
#Inject(OverlayContainer) private overlayContainer: OverlayContainer
) {
this.overlayContainer
.getContainerElement()
.classList.add("mytheme-alt-theme"); // this for double theme add to the root css class
}
}
This is already asked and I just copy paste my answer from here
EDIT :
As per your need, you can achieve this:
I have my default styles.scss as below style.scss that you need to change to _theme-color.scss
.fa-icon-nav {
color: mat-color($primary, 500) !important; // 500, 600 , 700 check material color pallet for more info
// You can use this too
// color: mat-color($alt-primary, 500) !important;
font-size: x-large;
}
or you can use this material color library from here
My problem is that styles for components as <mat-chip> or <button mat-raised-button>(just I found) are not working they are by default gray. For example style is applied for <mat-card>
Color properties are set as follow:
<mat-chip color="primary">
<button mat-raised-button color="primary">
I add theme #import "~#angular/material/prebuilt-themes/deeppurple-amber.css"; in styles.css as is described in Angular Material Guides - Theming.
Do I missed something?
Angular Version: 4
Angular Material Version: 2.0.0-beta.12
You don't have to just import the theme, you have to set it up.
#import '~#angular/material/theming';
#include mat-core();
//-------------------------------------------------------------------------------------------------------
// DEFINING THE BASE THEMING
//-------------------------------------------------------------------------------------------------------
$primary: mat-palette($mat-blue-grey);
$accent: mat-palette($mat-green);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
$dark-theme: mat-dark-theme($primary, $accent, $warn);
#include angular-material-theme($theme);
With that, you can chose your colors in the $primary, $accent or $warn, and chose the them to use (light or dark) with the angular-material-theme($theme) (or $dark-theme, but you figured it out).