獲取材料2主題配色/其他元素調色板

Question

我正在構建一個應用程序，但我想保持一致的配色方案，可以使用材質（2）與角度（2+）進行設置更改，但我我不知道如何獲得不直接提供用color="primary"對它們進行着色的元素的顏色方案，所以我仍然試圖弄清楚如何獲得我的Material 2主題使用的顏色/顏色方案。 ，我希望它改變時主題的變化，例如我的導航欄將適應主題的變化，因爲其設置爲

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10"> 

但從材料2犯規柵格元件採取同樣的參數，因此林左嘗試樣式它在足夠接近的顏色或者根本根本不匹配它（和它不會調整到主題的變化），如下所示：

我希望它匹配的主題墊，其顏色在這裏（並在導航欄設置中選擇的選項進行更改）

@import '~@angular/material/theming'; 

@include mat-core(); 



$candy-app-primary: mat-palette($mat-red); 
$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400); 
$candy-app-warn: mat-palette($mat-red); 
$candy-app-theme: mat-dark-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. 
.default { 
    @include angular-material-theme($candy-app-theme); 
} 
.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include angular-material-theme($light-theme); 
} 
@include angular-material-theme($candy-app-theme); 

Answer 1

我發現了一個很棒的解決方法!!!! 我很高興能夠展示這一點，因爲它一直在竊聽我如何爲年齡層實現這一點。 所以在這裏;首先，將所有的css文件改爲scss;

現有項目在控制檯ng set defaults.styleExt=scss

所有現有.css文件重命名爲.scss

手動更改的styles的文件擴展在01

• 運行從的CSS到.scss

• 如果你沒有使用像WebStorm重構工具來手動重命名，然後更改所有從.css的styleUrls到.scss

在未來的項目

• 只是爲了您的新項目只需使用ng new your-project-name --style=scss

• 對於所有新項目中使用SCSS使用ng set defaults.styleExt=scss --global

現在你需要有一個theme.scss文件在您的應用程序根目錄，如下所示： ​​

現在，在你的風格。SCSS文件要添加以下（因爲你可以看到我referrence背景顏色，但你可以改變它可以將任何元素的主題網站，但是你想）：

編輯：你不需要把這個習俗在你的styles.scss中@mixin元素，你可以把它放在你的*name*.component.scss中的任何一箇中，然後簡單地導入和包含它，就像你給出的例子一樣。

@import '~@angular/material/theming'; 

// Define a custom mixin that takes in the current theme 
@mixin theme-color-grabber($theme) { 
    // Parse the theme and create variables for each color in the pallete 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 
    // Create theme specfic styles 
    .primaryColorBG { 
    background-color: mat-color($primary); 
    } 
    .accentColorBG { 
    background-color: mat-color($accent); 
    } 
    .warnColorBG { 
    background-color: mat-color($warn); 
    } 
} 

現在去你theme.scss文件，您使用您的主題材料2項，如果你需要幫助的主題化檢查了這一點：Material 2 Github - Theming guide

現在打開你的theme.scss並導入你的風格。 scss，因爲我的theme.scss位於/src/app/theme.scss文件夾的根目錄中，所以我必須先走出它來引用我的/src/styles.scss全局樣式文件，就像這樣;

@import '../styles'; 

然後，我們必須實際包括我們新的自定義@mixin我們ALL我們的主題創建（如果你有多個像我這樣做，所以根據當前選擇的主題改變顏色）。

包括它上面的實際角材料的主題包括，就像這樣：

@include theme-color-grabber($theme); 
@include angular-material-theme($theme); 

如果您有任何主題我一樣將其添加在同一位置，像這樣：

.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include theme-color-grabber($light-theme); 
    @include angular-material-theme($light-theme); 

} 

你可以看到我在包含上面添加了我的theme-color-grabber，如果它的上面或下面的實際主題沒有關係，因爲它獲得的主題顏色是主要點。

我的整個themes.scss看起來是這樣的：

@import '~@angular/material/theming'; 
//We import our custom scss component here 
@import '../styles'; 

@include mat-core(); 

$theme-primary: mat-palette($mat-red); 
$theme-accent: mat-palette($mat-deep-orange, A200, A100, A400); 
$theme-warn: mat-palette($mat-red); 
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn); 
// 
@include theme-color-grabber($theme); 
@include angular-material-theme($theme); 
.light { 
    $light-primary: mat-palette($mat-blue, 200,300, 900); 
    $light-accent: mat-palette($mat-light-blue, 600, 100, 800); 
    $light-warn: mat-palette($mat-red, 600); 
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); 
    @include theme-color-grabber($light-theme); 
    @include angular-material-theme($light-theme); 

} 

最後，我們現在可以在我們的主題色彩爲背景任何地方調用！比如我給mat-grid-tile「主要」顏色（它不通過簡單的像這樣的類型設置爲相應的類名冒這個顏色='」的說法，像其他元素，如墊工具欄）：

<mat-grid-list cols="4" rows="4" rowHeight="100px"> 
    <mat-grid-tile 
    colspan="4" 
    rowspan="5" 
    class="primaryColorBG"> 
    <div fxLayout="column" fxLayoutAlign="center center"> 
     <h1 class="title-font">Callum</h1> 
     <h1 class="title-font">Tech</h1> 
    </div> 
    <p> 
     Ambitious and ready to take on the world of Information Technology,<br> 
     my love for programming and all things I.T. has not wavered since I first got access<br> 
     to my fathers computer at age 9. 
    </p> 
    </mat-grid-tile> 

</mat-grid-list> 

最後，我們的結果會是這樣的！：

紅色主題活動的

藍色主題積極