如何仅使用十六进制值创建有角度的材质主题？

Question

我所见过的用于创建有角度的材质主题的每个演示绝对都涉及使用预定义的调色板（例如$mat-blue）。我想创建一个仅从十六进制值开始的主题。我怎样才能做到这一点？（当然，我不希望从我的 HEX 值开始，然后以某种方式向后工作以在材料极其有限的预定义宇宙中找到相应的调色板？！）

这是我想使用的十六进制值的示例：https : //material.io/resources/color/#!/?view.left=0&view.right=1&primary.color=2C3E50&secondary.color=95a5a6&primary.text.color= ffffff&secondary.text.color=000000

编辑：澄清，我知道如何利用角材料提供预先定义的颜色来创建自定义主题（如筑底$primary关闭的$mat-blue），但我希望能够立足$primary的如断#2C3E50。

Answer 1

这是我确定的工作流程，以尽可能接近我想要实现的目标。

首先，确保您在尝试主题化时了解您的 scss 基础知识。如果您不知道这些项目及其语法是什么（即它们如何转换为 css）：

• map 和 get-map
• mixin
• function

...然后您需要先阅读链接的文档。（它们并不复杂，也不会花很长时间。）归根结底，angular 主题只是地图的 scss 映射，因此构建它们并访问它们的内容只是归结为一些 scss 专有技术。

在角料，你基本上与颜色的三种选择开始围绕建立你的主题：primary，accent，和warn。假设你选择三种颜色#375a7f，#444444和#eb0000分别。转到此站点，为每种颜色命名调色板（例如darkprimarymap）并将十六进制颜色输入菜单，如下所示：

...然后单击View Code，选择Angular 2，然后复制并粘贴您从以下内容中看到的代码：

...进入您的主题文件。“开箱即用”的主题文件如下所示：

$app-dark-primary: mat-palette($mat-grey, 700, 300, 900);
$app-dark-accent: mat-palette($mat-blue-grey, 400);
$app-dark-warn: mat-palette($mat-red, 500);

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

... wheremat-palette是一个函数，它接受我们刚刚复制的表单的嵌套映射。所以粘贴我们复制的代码来创建替代调色板变量，如下所示：

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

// Create nested scss map
$dark-primary-map: (
  50: #e7ebf0,
  100: #c3ced9,
  200: #9badbf,
  300: #738ca5,
  400: #557392,
  500: #375a7f, // original primary color you built this map around
  600: #315277,
  700: #2a486c,
  800: #233f62,
  900: #162e4f,
  A100: #8bb8ff,
  A200: #5898ff,
  A400: #2579ff,
  A700: #0c69ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$dark-accent-map: (
  50: #e9e9e9,
  100: #c7c7c7,
  200: #a2a2a2,
  300: #7c7c7c,
  400: #606060,
  500: #444444, // original accent color you built this map around
  600: #3e3e3e,
  700: #353535,
  800: #2d2d2d,
  900: #1f1f1f,
  A100: #f07a7a,
  A200: #eb4c4c,
  A400: #ff0505,
  A700: #eb0000,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff
  )
);

$dark-warn-map: (
  50: #fde0e0,
  100: #f9b3b3,
  200: #f58080,
  300: #f14d4d,
  400: #ee2626,
  500: #eb0000,  // original warn color you built this map around
  600: #e90000,
  700: #e50000,
  800: #e20000,
  900: #dd0000,
  A100: #ffffff,
  A200: #ffd1d1,
  A400: #ff9e9e,
  A700: #ff8585,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

// Convert maps into 'palettes'
$dark-primary-palette: mat-palette($dark-primary-map);
$dark-accent-palette: mat-palette($dark-accent-map);
$dark-warn-palette: mat-palette($dark-warn-map);

// Create 'theme' from palettes
$app-dark-theme: mat-dark-theme($dark-primary-palette, $dark-accent-palette, $dark-warn-palette);

您当然可以手动创建/编辑这些地图（这可能很聪明，因为链接的站点会根据您的单色输入进行简单的推断）。如果此代码位于名为 的文件中dark-theme.scss，则您可以在主/全局styles.scss文件中使用这种语法将该主题合并到您的 angular 应用程序中：

@import '~@angular/material/theming';
@include mat-core();
@import 'themes/dark-theme.scss'; // imports $app-dark-theme

.dark-theme {
  @include angular-material-theme($app-dark-theme);
  @include custom-components-theme($app-dark-theme);
}

现在，当您使用color="primary"有关此主题的指令为材质组件着色时，它将被着色为#375a7f，依此类推。

要从这些调色板中提取其他颜色以在您的应用程序中的自定义组件中使用，您可以在app.component.scss-theme.scss文件中使用这种语法：

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

// Define scss mixin that takes a $theme map and injects its content 
// into css styles; we'll inject our $app-dark-theme here later
@mixin app-component-theme($theme) {
  // Get the primary, secondary and warn palettes 
  // you created back from the active theme using the map-get() function
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  // Extract colors from those palettes using the mat-color() function
  // E.g. use the 'darker' input to get the color keyed by '700'
  $color1: mat-color($primary, darker);

  // E.g. use 'A100' to get the color keyed by 'A100' (A = Additional I think)
  $color2: mat-color($primary, A100);

  // E.g. use 'A100-contrast' to get the color keyed by 'A100' within the contrast sub-map
  $color3: mat-color($primary, A100-contrast);

  // Then use these color-value variables as per normal scss. E.g.
  mat-sidenav-container {
      background: $color1;
    mat-toolbar {
      background-color: $color2;
      mat-list{
        background-color: $color3;
      }
    }
  }
}

...然后将所有此类自定义组件主题合并到您的主/全局styles.scss文件中，如下所示：

@import 'component.scss-theme';

// Define custom component themes
@mixin custom-components-theme($theme) {
  @include app-component-theme($theme);
}