Angular 2 Material에서 런타임시 테마를 전환하면서 구성 요소 SCSS 파일에서 $ primary-dark와 같은 SCSS 변수를 사용할 수 있습니까?

Question

특히,

한 번 구현할 수있게하고 싶습니다. 모든 구성 요소 SCSS 파일에 여러 개의 테마 및 참조 $primary-dark이 있어야합니다.

내가 지시를 사용하는 솔루션을 찾고하지 오전 Theming your Angular Material app

에서 여러 테마를 구현합니다.

나는 그럴 수 없다고 말하고 있습니다.

Answer 1

*이 *

당신은 즉시 그들을 교환하려는 경우, 당신은 여전히 ​​당신의 site.scss 파일 내부의 다른 테마를 모두 정의 할 필요가 있기 때문에 코멘트 업데이트되었습니다.

@import '~@angular/material/theming'; 
// 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 default theme (same as the example above). 
$candy-app-primary: mat-palette($mat-indigo); 
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); 
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent); 

// Include the default theme styles. 
@include angular-material-theme($candy-app-theme); 

// Define an alternate dark theme. 
$dark-primary: mat-palette($mat-blue-grey); 
$dark-accent: mat-palette($mat-amber, A200, A100, A400); 
$dark-warn: mat-palette($mat-deep-orange); 
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); 

// Include the alternative theme styles inside of a block with a CSS class. You can make this 
// CSS class whatever you want. In this example, any component inside of an element with 
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme. 
.unicorn-dark-theme { 
    @include angular-material-theme($dark-theme); 
} 

당신이 테마 싶은 구성 요소에 .unicorn-dark-theme 클래스를 추가해야합니다.

저는 실제로 동적 테마를 작성하지는 않았지만 ng-class을 루트 레벨에 놓고 필요에 따라 토글 할 수 있기를 바랍니다.

해당 링크의 오른쪽 상단에있는 작은 페인트 통 아이콘을 클릭하면 원래 또한

을 게시 @ttugates 테마 조성 링크에서 여러 테마라는 제목의 섹션이 있습니다, 당신은 4 가지 테마 옵션을 볼 수 있습니다 .

일부 데모 코드로 재생하려면 material2 repo를 로컬로 복제하고 종속성을 설치 한 다음 npm run demo-app을 실행하십시오. 몇 가지 실제 예와 함께 놀 수있는 좋은 방법입니다.

* ORIGINAL 답변 *

우리가 사용해야하는 다른 .scss 파일로 site.scss 파일을 가져 같은 그런

$grey-color: mat-color(mat-palette($mat-grey)); 

으로 우리는 우리의 모든 변수를 선언하는 site.scss 파일이 그것. 당신이 제공 한 링크를 말한다처럼 우리는 그래서 우리는 스타일을 포함 빌드 우리에 대한 각-CLI 사용하는

@import '../../../styles/site.scss'; 

.set-for-deletion { 
    text-decoration: line-through; 
    color: $grey-color; 
} 

은 .angular-cli.json 파일에 파일.

Angular CLI를 사용하는 경우 Sass to css를 컴파일하도록 지원됩니다. 테마 파일 (예 : unicorn-app-theme.scss)을 가리키는 angular-cli.json의 'styles'목록에 새 항목을 추가하기 만하면됩니다.