2017-09-14 9 views
0

은 바르 : Angular 4 Material Theme의 배경 및 전경 팔레트를 검색 할 수 있습니까? 나는 <strong>차, 악센트를 얻을 팔레트</strong>을 경고하고 SCS들에 저장할 수 있어요

$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 
$primary: map-get($candy-app-theme, primary); 
$accent: map-get($candy-app-theme, accent); 
$warn: map-get($candy-app-theme, warn); 

는 지금은 CSS 클래스와 함께 할 스타일 내 자신의 구성 요소입니다. 하지만 카드 CSS 클래스 (더 좋은 예를 생각할 수 없다, 카드 구성 요소가 있다는 것을 알고있다)를 만들기를 원한다. 예를 들어, 배경색이 md-sidenav- 컨테이너의 정상적인 배경보다 약간 가볍다. .

어떻게 접근합니까?

나는 이미 봐 @Theming your own components (슬프게 그것의 그것의 덮개를 씌우지 않았다) 또한 나는 this guide를 우연히 만났다.

enter image description here

나는이 시도 -하지만 최대한 빨리 전경에서 색상을 얻기 위해 노력 나는 다음과 같은 오류 있어요 :

color: mat-color($foreground, text); 
//Error 

Module build failed: 
undefined 
     ^
     Argument `$map` of `map-get($map, $key)` must be a map 

Backtrace: 
     node_modules/@angular/material/_theming.scss:1107, in function `map-get` 
     node_modules/@angular/material/_theming.scss:1107, in function `mat-color` 
     src/assets/scss/angular-material/main-theme.scss:22 
     in C:\Users\tobia\Documents\frontend\node_modules\@angular\material\_theming.scss (line 1107, column 11) 
Error: 
undefined 
     ^
     Argument `$map` of `map-get($map, $key)` must be a map 

Backtrace: 
     node_modules/@angular/material/_theming.scss:1107, in function `map-get` 
     node_modules/@angular/material/_theming.scss:1107, in function `mat-color` 

내가 뭔가를 분명 간과하지 않았다 희망을. 모든 종류의 도움을 주시면 감사하겠습니다 :)

답변

1

소재 핵심 테마에 사용자 지정 테마를 적용하는 방법에 대해 뭔가 빠져 있다고 생각합니다.

당신의 styles.scss - 파일에 사용자 정의 테마의 믹스 인을 만듭니다 그 후

@import 'app/components/ml-file-tree-theme.scss'; 

@mixin custom-theme($theme) { 
    @include ml-file-tree-theme($theme);  
} 

을 해당 물질 테마 믹스 인을 포함해야한다 : 테마에 대한

@include angular-material-theme($my-theme); // default angular material theme 
@include custom-theme($my-theme);   // include custom theme 

아주 좋은 가이드 (사용자 정의 테마 포함)는 Tomas Trajan의 것입니다. https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1

+0

저에게 도움을 주셔서 감사합니다 .- @include ml-file-tree-theme ($ theme); 해결책이 아니었고, 나는 방금 일부가 엉망이 됐어. –