In Angular Material, colors play a significant role in defining the visual style and theming of your web application. Angular Material provides a predefined color palette system to help you maintain consistent and visually appealing color schemes throughout your application.
We've created a "@mixin " for managing colors, named "theme-var-colors " within the "_colors.scss " file located in the "mat-themes " folder. This mixin has been included in the "themes.scss " file.
Copy @mixin theme-var-colors($theme) {
//code will come here
} All the mixins need to be included in the "app-themes " section within the "themes.scss " file.
Copy @mixin app-themes($theme) {
@include theme-var-colors($theme);
} Primary Color
The primary color is the main color used for the majority of your application's elements, such as headers, buttons, and backgrounds.
mat-primary
Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.
Copy $primary: map.get($color-config, 'primary');
$color-primary: mat.get-color-from-palette($primary);
--color-primary: #{$color-primary};
The code snippet you provided can be explained as follows:
$primary: map.get($color-config, 'primary');
This line appears to be assigning a value to the variable $primary .
map.get() is likely a function used to retrieve a value from a map or dictionary.
It retrieves the value associated with the key 'primary' from a map named $color-config.
The value retrieved is assumed to be a color or a reference to a color.
$color-primary: mat.get-color-from-palette($primary);
This line assigns a value to the variable $color-primary .
mat.get-color-from-palette() is likely a custom or library function used to extract a color from a color palette.
It takes the previously assigned $primary value (presumably a color or color reference) and extracts the actual color value.
--color-primary: #{$color-primary} ;
This line sets a CSS custom property (also known as a CSS variable) named --color-primary .
The value of this custom property is assigned the value stored in the $color-primary variable.
The #{$color-primary} syntax is used to interpolate the value of $color-primary into the CSS custom property.
Primary color variations
Copy $color-primary-50: mat.get-color-from-palette($primary, 50);
$color-primary-100: mat.get-color-from-palette($primary, 100);
$color-primary-200: mat.get-color-from-palette($primary, 200);
$color-primary-300: mat.get-color-from-palette($primary, 300);
$color-primary-400: mat.get-color-from-palette($primary, 400);
$color-primary-500: mat.get-color-from-palette($primary, 500);
$color-primary-600: mat.get-color-from-palette($primary, 600);
$color-primary-700: mat.get-color-from-palette($primary, 700);
$color-primary-800: mat.get-color-from-palette($primary, 800);
$color-primary-900: mat.get-color-from-palette($primary, 900);
--color-primary-50: #{$color-primary-50};
--color-primary-100: #{$color-primary-100};
--color-primary-200: #{$color-primary-200};
--color-primary-300: #{$color-primary-300};
--color-primary-400: #{$color-primary-400};
--color-primary-500: #{$color-primary-500};
--color-primary-600: #{$color-primary-600};
--color-primary-700: #{$color-primary-700};
--color-primary-800: #{$color-primary-800};
--color-primary-900: #{$color-primary-900}; Accent Color
The accent color is used to highlight certain UI elements and add visual interest to your application. It complements the primary color.
mat-accent
Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.
Copy $accent: map.get($color-config, 'accent');
$color-accent: mat.get-color-from-palette($accent);
--color-accent: #{$color-accent}; Accent color variations:
Copy $color-accent-50: mat.get-color-from-palette($accent, 50);
$color-accent-100: mat.get-color-from-palette($accent, 100);
$color-accent-200: mat.get-color-from-palette($accent, 200);
$color-accent-200-contrast: mat.get-color-from-palette($accent, 200-contrast);
$color-accent-300: mat.get-color-from-palette($accent, 300);
$color-accent-400: mat.get-color-from-palette($accent, 400);
$color-accent-500: mat.get-color-from-palette($accent, 500);
$color-accent-600: mat.get-color-from-palette($accent, 600);
$color-accent-700: mat.get-color-from-palette($accent, 700);
$color-accent-800: mat.get-color-from-palette($accent, 800);
$color-accent-900: mat.get-color-from-palette($accent, 900);
--color-accent-50: #{$color-accent-50};
--color-accent-100: #{$color-accent-100};
--color-accent-200: #{$color-accent-200};
--color-accent-200-contrast: #{$color-accent-200-contrast};
--color-accent-300: #{$color-accent-300};
--color-accent-400: #{$color-accent-400};
--color-accent-500: #{$color-accent-500};
--color-accent-600: #{$color-accent-600};
--color-accent-700: #{$color-accent-700};
--color-accent-800: #{$color-accent-800};
--color-accent-900: #{$color-accent-900}; Warn color
The warn color is used to indicate errors or warnings in your application.
mat-warn
Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.
Copy $warn: map.get($color-config, 'warn');
$color-warn: mat.get-color-from-palette($warn);
--color-warn: #{$color-warn}; Warn color variations:
Copy $color-warn-50: mat.get-color-from-palette($warn, 50);
$color-warn-100: mat.get-color-from-palette($warn, 100);
$color-warn-200: mat.get-color-from-palette($warn, 200);
$color-warn-300: mat.get-color-from-palette($warn, 300);
$color-warn-400: mat.get-color-from-palette($warn, 400);
$color-warn-500: mat.get-color-from-palette($warn, 500);
--color-warn-50: #{$color-warn-50};
--color-warn-100: #{$color-warn-100};
--color-warn-200: #{$color-warn-200};
--color-warn-300: #{$color-warn-300};
--color-warn-400: #{$color-warn-400};
--color-warn-500: #{$color-warn-500}; Info Color
This color is used to to convey informational messages or elements in a user interface
Copy $info: mat.define-palette(mat.$blue-palette);
$color-info: mat.get-color-from-palette($info);
--color-info: #{$color-info}; Success Color
This color is often used to indicate that a task or action has been completed successfully or that a positive status or outcome has been achieved.
Copy $success: mat.define-palette(mat.$green-palette);
$color-success: mat.get-color-from-palette($success);
--color-success: #{$color-success}; Success color variations:
Copy $color-success-50: mat.get-color-from-palette($success, 50);
$color-success-100: mat.get-color-from-palette($success, 100);
$color-success-200: mat.get-color-from-palette($success, 200);
$color-success-300: mat.get-color-from-palette($success, 300);
$color-success-400: mat.get-color-from-palette($success, 400);
$color-success-500: mat.get-color-from-palette($success, 500);
--color-success-50: #{$color-success-50};
--color-success-100: #{$color-success-100};
--color-success-200: #{$color-success-200};
--color-success-300: #{$color-success-300};
--color-success-400: #{$color-success-400};
--color-success-500: #{$color-success-500}; Error Color
This color is used to indicate that an error or problem has occurred. It is a crucial visual cue that helps users quickly recognize and respond to issues within an application. The choice of color for an error message or error-related elements can vary, but red is a commonly used color for this purpose in many design systems.
Copy $error: mat.define-palette(mat.$orange-palette);
$color-error: mat.get-color-from-palette($error);
--color-error: #{$color-error}; Error color variations:
Copy $color-error-50: mat.get-color-from-palette($error, 50);
$color-error-100: mat.get-color-from-palette($error, 100);
$color-error-200: mat.get-color-from-palette($error, 200);
$color-error-300: mat.get-color-from-palette($error, 300);
$color-error-400: mat.get-color-from-palette($error, 400);
$color-error-500: mat.get-color-from-palette($error, 500);
--color-error-50: #{$color-error-50};
--color-error-100: #{$color-error-100};
--color-error-200: #{$color-error-200};
--color-error-300: #{$color-error-300};
--color-error-400: #{$color-error-400};
--color-error-500: #{$color-error-500};