A theme is a composition of color palettes (not just a single color palette, multiple color palettes) to be applied to the Angular Material components.
Primary, Warn, and Accent
In particular, a theme consists of:
Primary - color displayed most frequently across your app’s screens and components.
Secondary / Accent - Provides more ways to accent and distinguish your product. -
-- Floating Action Button(Literally buttons that float over main content).
-- Selection controls(sliders, switches etc.)
-- Highlighting selected text
-- Progress bars
-- Links and headlines
Surface - affect surfaces of components, such as cards, sheets, and menus.
Background - appears behind scrollable content. The baseline background and surface color is #FFFFFF.
Error / Warn - indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020.
[1][4]
An accent palette: colors used for the floating action button and interactive elements.
A warn palette: colors used to convey error state.
A foreground palette: colors for text and icons.
A background palette: colors used for element backgrounds.
[2]
Color Palette
Color Palette is a full range of colors that can be displayed on a device.[1]
Inside Material design, it refers to the range of colors that canbe used within the application.
To generate a color palette, we can use Angular Material’s mat-palette mix-in. 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”, “dark” and “contrast” colors of the given base palette. [3]
Base Palette
The base palette is just another color palette that compromises primary and accent colors of a single color.Let’s take Material Design’s red color palette as an example:
The values 50 - 900 represent the hue values or the “strength” of the color, or how light or dark it is.
Hue can typically be represented quantitatively by a single number, often corresponding to an angular position around a central or neutral point or axis on a colorspace coordinate diagram (such as a chromaticity diagram) or color wheel, or by its dominant wavelength or that of its complementary color [6]
Understanding mat-palette
mat-palette generates a Material Design color palette out of a base color palette.
take the following code as example
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
$result: map_merge($base-palette, (
default: map-get($base-palette, $default),
lighter: map-get($base-palette, $lighter),
darker: map-get($base-palette, $darker),
default-contrast: mat-contrast($base-palette, $default),
lighter-contrast: mat-contrast($base-palette, $lighter),
darker-contrast: mat-contrast($base-palette, $darker)
));
// For each hue in the palette, add a "-contrast" color to the map.
@each $hue, $color in $base-palette {
$result: map_merge($result, (
'#{$hue}-contrast': mat-contrast($base-palette, $hue)
));
}
@return $result;
}
A mix-in is just a function - it takes arguments and returns something. mat-palette takes a base color palette (which is a map like $mat-red) and optional default values for the generated color palette’s default, lighter and darker colors. Eventually it returns a new color palette that has some additional map values. Those additional values are the mentioned default, lighter and darker colors, as well as their corresponding default-contrast, lighter-contrast and darker-contrast colors. On top of that it generates keys for contrast values for each base hue tone (50 - 900). [3]
👉 : IF we only need to use one color for the primary
Therefore we could use only ONE base color and its CONTRAST color to compose the simplest color palatte, for the mat-palette function of $admin-app-primary
e.g.
$sample-map: (
500 : #000000, <=== notice here 500 could be any number
contrast: (
500 : #FFFFFF, <=== as long as it is identical with number here
)
);
/*Apllication*/
@include mat-core();
$admin-app-primary: mat-palette($sample-map);
Defining a custom theme
// define 3 theme color
/* mat-palette accepts $palette-name, main, lighter and darker variants*/
$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
$my-theme-accent: mat-palette($mat-light-blue);
$my-theme-warn: mat-palette($mat-deep-orange, A200);
/* create theme (use mat-dark-theme for themes with dark backgrounds)*/
$my-theme: mat-light-theme(
$my-theme-primary,
$my-theme-accent,
$my-theme-warn
);
The numbers behind the palette variable name select particular shades of chosen color for default, lighter and darker variants. If no numbers are provided Angular Material selects sensible defaults $default: 500, $lighter: 100, $darker: 700. [5]
import mat-core() Sass mixin, This should only be included once in application
puddlejumper26
commented
4 years ago
Guideline
mat-paletteReference
What is a theme?
A theme is a composition of color palettes (not just a single color palette, multiple color palettes) to be applied to the Angular Material components.
Primary, Warn, and Accent
In particular,
a themeconsists of:Primary- color displayed most frequently across your app’s screens and components.Secondary / Accent- Provides more ways to accent and distinguish your product. - -- Floating Action Button(Literally buttons that float over main content). -- Selection controls(sliders, switches etc.) -- Highlighting selected text -- Progress bars -- Links and headlinesSurface- affect surfaces of components, such as cards, sheets, and menus.Background- appears behind scrollable content. The baseline background and surface color is #FFFFFF.Error / Warn- indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020. [1][4]An
accentpalette: colors used for the floating action button and interactive elements.A
warnpalette: colors used to convey error state.A
foregroundpalette: colors for text and icons.A
backgroundpalette: colors used for element backgrounds. [2]Color Palette
Color Paletteis a full range of colors that can be displayed on a device.[1]👉 : Here is a resource for color palette
Inside Material design, it refers to the range of colors that canbe used within the application.
To generate a color palette, we can use Angular Material’s
mat-palettemix-in.mat-palettetakes abase 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”, “dark” and “contrast” colors of the given base palette. [3]Base Palette
The base palette is just another color palette that compromises primary and accent colors of a single color.Let’s take Material Design’s red color palette as an example:
The values 50 - 900 represent the
huevalues or the “strength” of the color, or how light or dark it is.Understanding mat-palette
mat-palettegenerates a Material Design color palette out of a base color palette.take the following code as example
A mix-in is just a function - it takes arguments and returns something. mat-palette takes a base color palette (which is a map like $mat-red) and optional default values for the generated color palette’s default, lighter and darker colors. Eventually it returns a new color palette that has some additional map values. Those additional values are the mentioned
default, lighter and darkercolors, as well as theircorresponding default-contrast, lighter-contrast and darker-contrastcolors. On top of that it generateskeysforcontrast valuesfor eachbase hue tone(50 - 900). [3]👉 : IF we only need to use one color for the primary
Therefore we could use only
ONEbase color and itsCONTRASTcolor to compose the simplest color palatte, for themat-palettefunction of$admin-app-primarye.g.
Defining a custom theme
The numbers behind the palette variable name select particular shades of chosen color for
default,lighteranddarkervariants. Ifno numbersare provided Angular Material selects sensible defaults$default: 500, $lighter: 100, $darker: 700.[5]mat-core()Sass mixin,This should only be included once in applicationReference
[1] Customize Angular Material Design [2] Theming your Angular Material app [3] https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html [4] https://material.io/design/color/#color-theme-creation [5] https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 [6] https://en.wikipedia.org/wiki/Hue