"#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
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);
I'm trying to use the QML-material library in a Qt Quick Application.
But when I try to use the import code it says
module "Material" is not installed`
import Material 0.1
I did also try this but that seems not to work:
import "modules/Material" as Material
qml.qrc looks like this, all qmldir files are listed:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>modules/Material/qmldir</file>
<file>modules/Material/Extras/qmldir</file>
<file>modules/Material/ListItems/qmldir</file>
<file>modules/QtQuick/Controls/Styles/Material/qmldir</file>
</qresource>
</RCC>
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.addImportPath("qrc:/");
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
Is there something I'm missing or is it not possible to use qmldir in qrc file?
You need to add to the import path the folder where the modules are located.
In this case it's qrc:/modules/.
Example:
engine.addImportPath( "qrc:///modules" );
For a module to work you need to have access to the qmldir file, but also all the files referenced in it. So you need to add all the files of the library to the the qrc.