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
(default): A predefined color palette that typically represents your application's primary brand color.
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
: A predefined color palette that typically represents your application's primary brand color.
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
: A predefined color palette that typically represents your application's primary brand color.
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};
Last updated 9 months ago