[英]How to create a custom color theme with angular5 and angular materials
我一直在關注關於如何創建自定義主題的 angular/material 文檔,關注其他博客,並檢查了各種類似的堆棧溢出問題,但似乎無法解決這個問題。 我有以下 style.css、angular-cli.json、theme.scss 和另一個 sass 文件,其中我的主題顏色來自 super-styles.sass。
樣式文件
...
@import 'assets/styles/theme.scss';
...
angular-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);
超級樣式.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/styles/ theme.scss 模塊構建失敗:未知單詞 (23:1)
21 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |
23 | // 包括應用程序中使用的核心和每個組件的主題樣式。 | ^ 24 | // 或者,您可以為每個組件導入並@include 主題混合 25 | // 你正在使用的。
關於如何構建自定義主題並在我的 angular 應用程序中使用它的任何幫助都會非常有幫助。 謝謝!
為了對 Angular - Material 使用自定義的十六進制調色板,您需要為調色板定義不同的色調和對比色,即使您只需要一種顏色。 我建議至少使用 3 種顏色(淺色、普通色、深色),以便它與 Material 的內置動畫完美配合:
// 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);
正如 Z. Bagley 建議制作自己的調色板,但我認為您不需要將所有這些顏色都制作成調色板。 例如,這工作正常。
$custom-collection: (
warning : #FFC116,
success : #0a630f,
danger: #c00000,
contrast: (
warning : #000000,
success : #FFFFFF,
danger: #FFFFFF,
)
);
然后你按照建議制作調色板
$my-app-custom: mat-palette($custom-collection, custom);
然后像這樣在 mat-light-theme 行之后將其合並到主題
$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" 對應的元素。
為了將來參考,有一些工具可以根據起始顏色為您創建主題,例如http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.