Angular 5 Material 多个主题如何

Question

我有这个文件作为我的根 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);
}

根据：https://material.angular.io/guide/theming#multiple-themes

很抱歉，指南内容不多。如果你能看到我能看到的任何东西，请告诉我。我从头到尾读了五遍我找不到任何线索。

从这里到哪里？

如果我尝试这样做：

.main{
   background: $candy-app-primary;
}

应用失败：

Failed to compile.

./src/app/app.component.scss
Module build failed: 
undefined
            ^
      (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
      in C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\@angular\material\_theming.scss (line 1136, column 14)
 @ ./src/app/app.component.ts 20:21-52
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我不明白我应该如何使用 Material 多主题。

这是我的 package.json：

{
  "name": "web.ui",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng b -prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/cdk": "^5.2.2",
    "@angular/common": "^5.2.3",
    "@angular/compiler": "^5.2.3",
    "@angular/core": "^5.2.3",
    "@angular/forms": "^5.2.3",
    "@angular/http": "^5.2.3",
    "@angular/material": "^5.2.2",
    "@angular/platform-browser": "^5.2.3",
    "@angular/platform-browser-dynamic": "^5.2.3",
    "@angular/router": "^5.2.3",
    "angular-2-local-storage": "^1.0.1",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.5.3",
    "exitzero": "^1.0.1",
    "font-awesome": "^4.7.0",
    "ng2-ion-range-slider": "^1.0.3",
    "parcel-plugin-inlinesvg": "0.0.12",
    "rxjs": "^5.5.6",
    "typeface-comfortaa": "0.0.54",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0",
    "@angular/compiler-cli": "^5.2.3",
    "@angular/language-service": "^5.2.3",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~9.4.0",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~3.0.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "parcel-bundler": "^1.5.1",
    "parcel-plugin-angular": "0.5.1-next.13",
    "parcel-plugin-typescript": "^0.6.0",
    "postcss-modules": "^1.1.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.9.1",
    "typescript": "~2.7.0"
  }
}

我可以提供一个带有浅色和深色主题的示例场景吗？

Answer 1

background: $candy-app-primary;

$candy-app-primary 定义调色板而不是颜色。

要获得颜色，您必须使用 mat-color()

$primary: mat-color($candy-app-primary);

来自我的 theme.scss 的示例：

$ev-app-primary: mat-palette($mat-indigo, 800, 300, 900);
$ev-app-accent: mat-palette($mat-blue, A200, A100, A400);
$ev-app-warn: mat-palette($mat-deep-orange, A200);
$ev-theme: mat-light-theme($ev-app-primary, $ev-app-accent, $ev-app-warn);

$primary: mat-color($ev-app-primary);
$accent: mat-color($ev-app-accent);
$warn: mat-color($ev-app-warn);

$foreground: map-get($ev-theme, foreground);
$background: map-get($ev-theme, background);

那么你可以使用如下颜色：

background-color: rgba(mat-color($background, card), .25);
color: $primary;