Как создать пользовательскую цветовую тему с угловыми5 и angular материалами

Я следил за документацией angular/material, как создавать пользовательскую тему, следить за другими блогами и проверять различные проблемы с переполнением стека, но, похоже, эта работа не работает. У меня есть следующие styles.css, angular -cli.json, theme.scss и еще один sass файл, в котором цвета моей темы приходят из super-styles.sass.

styles.css

...
@import 'assets/styles/theme.scss';
...

angular -cli.json

...
"styles": [
   "styles.css",
    "src/assets/styles/theme.scss"
],
...

theme.scss

@import '[email protected]/material/theming';
@import "super-styles";

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core()

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($darkblue, A400);
$candy-app-accent:  mat-palette($orange, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($alert);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

Супер-styles.sass

...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...

Согласно учебникам, я чувствую, что это должно работать, но angular не компилируется, и я получаю сообщение об ошибке.

ОШИБКА в. / node_modules/css-loader?{ "sourceMap":false, "importLoaders":1}!./node_modules/postcss-loader?{ "ident": "postcss" }!./src/assets/стили/theme.scss Ошибка сборки модуля: Неизвестное слово (23: 1)

21 | $candy-app-theme: mat-light-theme ($ candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |

23 |//Включить стили темы для ядра и каждого компонента, используемого в вашем приложении. | ^ 24 |//В качестве альтернативы вы можете импортировать и @включать темы mixins для каждого компонента 25 |//, который вы используете.

Любая помощь в том, как создать пользовательскую тему и использовать ее в моем приложении angular, будет очень полезна. Спасибо!

Ответ 1

Чтобы использовать пользовательскую шестнадцатеричную палитру для Angular - материала, вам нужно будет определить различные оттенки, а также контрастные цвета для палитры, даже если вам нужен только один цвет. Я бы предложил использовать по крайней мере 3 цвета (легкий, нормальный, темный), чтобы он работал безупречно с материалом, созданным в анимации:

// below defines your custom color to build a theme palette from
$my-blue: (
  50: #7fdddd,
  100: #7faedd,
  200: #7f7fdd,
  300: #7faedd,
  400: #7faedd,
  500: #7faedd,
  600: #7faedd,
  700: #7faedd,
  800: #7faedd,
  900: #7faedd,
  A100: #7faedd,
  A200: #7faedd,
  A400: #7faedd,
  A700: #7faedd,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);
// below creates a primary palette with three shades of blue
$my-primary: mat-palette($my-blue, 100, 50, 200);

Ответ 2

как предложил З. Бэгли, создайте свою собственную палитру, но я думаю, что вам не нужно превращать все эти цвета в палитру. Например, это отлично работает.

$custom-collection: (
    warning :  #FFC116,
    success :  #0a630f,
    danger:    #c00000,
    contrast: (
        warning :  #000000,
        success :  #FFFFFF,
        danger:    #FFFFFF,
    )
);

Затем вы делаете палитру в соответствии с предложением

$my-app-custom: mat-palette($custom-collection, custom);

Затем объедините его с темой после строки mat- со светлой темой, как этот

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));

После этого у вас есть один объект, где расположен каждый цвет.

И могу ли я предложить вам сделать общий объект для этого наподобие этого

$custom: map-get($my-app-theme, custom);

Затем вы можете использовать его в своем компоненте, как это

background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);

И еще одно предложение. Вы можете добавить mat- success в ваш глобальный файл стиля

.mat-success {
  background-color: mat-color($custom, success);
  color: mat-color($custom, success-contrast);
}

Теперь вы можете использовать цветовой атрибут, как с основными и акцентными цветами.

<button mat-flat-button color="success" >Success</button>

Это работает, потому что директива цвета добавляет mat- * -class к элементу, где * - значение цвета. Таким образом, color = "foo" генерирует class= "mat- foo" для соответствующего элемента.