Вот рабочий процесс, на котором я остановился, чтобы максимально приблизиться к тому, чего я хотел достичь.
Прежде всего, убедитесь, что вы знаете свои css основы при попытке их объединения. Если вы не знаете, что это за элементы и их синтаксис (то есть как они переводятся на css):
... затем необходимо сначала прочитать связанная документация. (Они не сложны и не займут много времени.) В конце концов, темы angular - это просто карты карт, поэтому их создание и доступ к их содержимому сводятся к некоторому ноу-хау css. .
В angular материале вы в основном начинаете с трех вариантов цвета, чтобы построить свою тему вокруг: primary, accent и warn. Предположим, вы выбрали три цвета #375a7f, #444444 и #eb0000 соответственно. Go до этого сайта и для каждого цвета назовите палитру (например, darkprimarymap) и введите HEX-цвет в меню следующим образом:
... затем нажмите View Code, выберите Angular 2, затем скопируйте и вставьте код, который вы видите, примерно так:
... в ваш файл тем. Тематический файл «из коробки» выглядит следующим образом:
$app-dark-primary: mat-palette($mat-grey, 700, 300, 900);
$app-dark-accent: mat-palette($mat-blue-grey, 400);
$app-dark-warn: mat-palette($mat-red, 500);
$app-dark-theme: mat-dark-theme($app-dark-primary, $app-dark-accent, $app-dark-warn);
... где mat-palette - это функция, которая принимает вложенные карты формы, которую мы только что скопировали. Поэтому вставьте скопированный код, чтобы создать альтернативные переменные палитры, например:
@import '~@angular/material/theming';
// Create nested scss map
$dark-primary-map: (
50: #e7ebf0,
100: #c3ced9,
200: #9badbf,
300: #738ca5,
400: #557392,
500: #375a7f, // original primary color you built this map around
600: #315277,
700: #2a486c,
800: #233f62,
900: #162e4f,
A100: #8bb8ff,
A200: #5898ff,
A400: #2579ff,
A700: #0c69ff,
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: #ffffff,
A700: #ffffff
)
);
$dark-accent-map: (
50: #e9e9e9,
100: #c7c7c7,
200: #a2a2a2,
300: #7c7c7c,
400: #606060,
500: #444444, // original accent color you built this map around
600: #3e3e3e,
700: #353535,
800: #2d2d2d,
900: #1f1f1f,
A100: #f07a7a,
A200: #eb4c4c,
A400: #ff0505,
A700: #eb0000,
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
)
);
$dark-warn-map: (
50: #fde0e0,
100: #f9b3b3,
200: #f58080,
300: #f14d4d,
400: #ee2626,
500: #eb0000, // original warn color you built this map around
600: #e90000,
700: #e50000,
800: #e20000,
900: #dd0000,
A100: #ffffff,
A200: #ffd1d1,
A400: #ff9e9e,
A700: #ff8585,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
// Convert maps into 'palettes'
$dark-primary-palette: mat-palette($dark-primary-map);
$dark-accent-palette: mat-palette($dark-accent-map);
$dark-warn-palette: mat-palette($dark-warn-map);
// Create 'theme' from palettes
$app-dark-theme: mat-dark-theme($dark-primary-palette, $dark-accent-palette, $dark-warn-palette);
Вы, конечно, можете вручную создавать / редактировать эти карты (что может быть разумно, поскольку связанный сайт упрощает c экстраполяцию из вашего одноцветный ввод). Если этот код находится в файле с именем dark-theme.scss, вы затем включаете эту тему в ваше приложение angular с таким синтаксисом в своем основном / глобальном styles.scss файле:
@import '~@angular/material/theming';
@include mat-core();
@import 'themes/dark-theme.scss'; // imports $app-dark-theme
.dark-theme {
@include angular-material-theme($app-dark-theme);
@include custom-components-theme($app-dark-theme);
}
Теперь, когда Вы окрашиваете компонент материала с помощью директивы color="primary" на эту тему, он будет окрашен в #375a7f и так далее.
Чтобы извлечь другие цвета из этих палитр для использования в вашем приложении в пользовательских компонентах, вы используете синтаксис такого типа в файле app.component.scss-theme.scss:
@import '~@angular/material/theming';
// Define scss mixin that takes a $theme map and injects its content
// into css styles; we'll inject our $app-dark-theme here later
@mixin app-component-theme($theme) {
// Get the primary, secondary and warn palettes
// you created back from the active theme using the map-get() function
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
// Extract colors from those palettes using the mat-color() function
// E.g. use the 'darker' input to get the color keyed by '700'
$color1: mat-color($primary, darker);
// E.g. use 'A100' to get the color keyed by 'A100' (A = Additional I think)
$color2: mat-color($primary, A100);
// E.g. use 'A100-contrast' to get the color keyed by 'A100' within the contrast sub-map
$color3: mat-color($primary, A100-contrast);
// Then use these color-value variables as per normal scss. E.g.
mat-sidenav-container {
background: $color1;
mat-toolbar {
background-color: $color2;
mat-list{
background-color: $color3;
}
}
}
}
... и затем включаете все такие темы пользовательских компонентов в ваш основной / глобальный styles.scss файл, например, так:
@import 'component.scss-theme';
// Define custom component themes
@mixin custom-components-theme($theme) {
@include app-component-theme($theme);
}