Я работаю с Angular 17 и успешно создал собственную тему материала с основными, акцентными и предупреждающими цветами. Однако я хотел бы добавить в свою тему дополнительные цвета, такие как вторичность и успех. Как я могу определить эти дополнительные цветовые палитры в моей теме Angular Material?
Кроме того, у меня есть вопрос, зачем мне определять цветовую палитру. Например, если я хочу использовать #5988ff в качестве основного цвета, зачем мне создавать палитру, а не просто устанавливать #5988ff в качестве основного цвета?
Вот моя текущая настройка SCSS для этой темы:
@use '@angular/material' as mat;
@include mat.core();
$custom-primary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-primary: mat.define-palette($custom-primary, 500);
$custom-secondary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-secondary: mat.define-palette($custom-secondary, 500);
$custom-accent: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-accent: mat.define-palette($custom-accent, A200, A100, A400);
$custom-warn: (50: #ffe0e0, 100: #ffb3b3, 200: #ff8080, 300: #ff4d4d, 400: #ff2626, 500: #ff0000, 600: #ff0000, 700: #ff0000, 800: #ff0000, 900: #ff0000, A100: #ffffff, A200: #fff2f2, A400: #ffbfbf, A700: #ffa6a6, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000,));
$custom-warn: mat.define-palette($custom-warn, 400);
$My_Project-theme: mat.define-light-theme((color: (primary: $custom-primary, secondary: $custom-secondary, accent: $custom-accent, warn: $custom-warn,), typography: mat.define-typography-config(), density: 0));
@include mat.all-component-themes($My_Project-theme);
Я мог только изменить тему локально. На Stackblitz это не сработало. В любом случае, вот код для этого:
Вы не можете добавить дополнительные цвета в тему Angular Material (M2), поддерживаются только primary
, accent
и warn
.
Палитра необходима, поскольку в компонентах Angular Material используются разные оттенки цветов. Например, при наведении кнопки. Также для каждого оттенка определен контрастный цвет, поэтому Angular Material знает, какой цвет переднего плана использовать с цветом оттенка на заднем плане.
Вы можете добавить его, но вам придется определить для него палитры.
Вот Добавлен Stackblitz с палитрой успеха
Заметные изменения:
$custom-success: mat.define-palette(mat.$green-palette, 500);
в global-styles.scss
success-container
класс в global-styles.scss
div
с .success-container
.Вы можете определить другие палитры в соответствии с потребностями ваших проектов.