Scss Mat Color

This function adds or subtracts the specified amount to from the existing color value.

Scss mat color.

First of let s take a look at the angular material color palette to understand how it works. The darken function decreases lightness by a fixed amount which is often not the desired effect. Angular material theme definition file. Generating angular material custom color palette.

To make a color a certain percentage darker than it was before use color scale instead. My first attempt was to create the color variables in the theme scss directly that s wrong because it would include mat core and angular material theme every time we. I am hoping to have the background of a mat sidenav the same as my mat toolbar theme color. Mat palette takes a color name as its first argument.

The next thing we need to do is to generate color palettes which can then be composed to an actual theme. This is how color palettes are defined in angular material. However if you have to preserve the existing behavior darken. You can find theming file here.

Mat palette takes a base palette yes that s another palette more on that in a second and returns a new palette that comes with material specific hue color values for light. What you shouldn t do. By simply importing the theme scss into styles scss you can tap into. Let s import both.

In src styles scss i have. Angular material2 uses a utility scss file styles scss which like theme scss is located in src and automatically compiles. Theme scss and custom component themes scss in our main styles scss and include their mixins so our updated file will look like below. The numbers behind the palette variable name select particular shades of chosen color for default lighter and darker variants if no numbers are provided.

Adjusts the color s hue with a degree from 360deg to 360deg. The color names and values themselves are taken from the official material design color guidelines.