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

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

стили.в CSS

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

угловой-cli.в JSON

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

тема.scss

@import '~@angular/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);

супер-стилей.Сасс!--5--> 

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

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

ошибка в ./ node_modules / css-загрузчик?{"sourceMap": false,"importLoaders": 1}!./ node_modules / postcss-загрузчик?{"ident": "postcss"}!./ src / активы / стили / тема.СКС Ошибка сборки модуля: неизвестное слово (23:1)

21 | $candy-app-тема: мат-свет-тема ($candy-app-primary, $ candy-app-accent, $candy-app-warn); 22/

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

помощь в создании собственной темы и используйте его в моем приложении angular было бы очень полезно. Спасибо!

7
angular angular-material material-design

1 ответов

чтобы использовать пользовательскую шестнадцатеричную палитру для углового материала, вам нужно будет определить различные оттенки, а также контрастные цвета для палитры, даже если вы хотите только один цвет. Я бы предложил использовать по крайней мере 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);
10