角度材质 - 设置调色板

3 回答

• 3

  不幸的是，由于Angular 2现在仍处于alpha状态， the only way to change the color palette is to modify _default-theme.scss directly and create a new npm package .

  一位Angular成员说：

  @ samio80这些样式目前都是以主题为主题编写的，但我们还没有现成的部署策略 . 同时作为解决方法，您可以直接提取源并通过修改_default-theme.scss和创建npm包（通过脚本stage-release.sh）来自定义主题 .

  资料来源：https://github.com/angular/material2/issues/287

  回复于 2024-04-25T20:01:01+08:00
• 3

  Angular Material 2现已更新为alpha 9，并为主题提供支持 . Theming Documentation解释了如何在应用程序中完全实现自己的自定义主题 .

  以下是文档sass文件的内容 . 您可以决定不使用提供的材料颜色并使用您自己的颜色 .

  @import '~@angular/material/core/theming/all-theme';
  // Plus imports for other components in your app.
  
  // Include the base styles for Angular Material core. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  @include md-core();
  
  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.
  $primary: md-palette($md-indigo);
  $accent:  md-palette($md-pink, A200, A100, A400);
  
  // The warn palette is optional (defaults to red).
  $warn:    md-palette($md-red);
  
  // Create the theme object (a Sass map containing all of the palettes).
  $theme: md-light-theme($primary, $accent, $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.
  @include angular-material-theme($theme);
  

  应该注意的是，尽管主题支持是可用的，但它尚未最终确定，并且文档表明他们计划随着时间的推移使这更容易 . 然而，目前的状态运作良好 .

  回复于 2024-04-25T20:01:01+08:00
• 2

  至于使用预定义的材质配色方案，您始终可以按照主题指南available here进行操作 .

  如果要定义自己的公司颜色方案，只需预先定义自定义调色板并将其传递给 mat-palette() 函数：

  ...    
  $mat-custom: (
              50: #e0f2f1,
              100: #b2dfdb,
              200: #80cbc4,
              300: #4db6ac,
              400: #26a69a,
              500: #009688,
              600: #00897b,
              700: #00796b,
              800: #00695c,
              900: #004d40,
              A100: #a7ffeb,
              A200: #64ffda,
              A400: #1de9b6,
              A700: #00bfa5,
              contrast: (
                      50: $black-87-opacity,
                      100: $black-87-opacity,
                      200: $black-87-opacity,
                      300: $black-87-opacity,
                      400: $black-87-opacity,
                      500: white,
                      600: white,
                      700: white,
                      800: $white-87-opacity,
                      900: $white-87-opacity,
                      A100: $black-87-opacity,
                      A200: $black-87-opacity,
                      A400: $black-87-opacity,
                      A700: $black-87-opacity,
              )
      );
  
      // Define the palettes for your theme using the Material Design palettes available in palette.scss
      // (imported above). For each palette, you can optionally specify a default, lighter, and darker
      // hue.
      $candy-app-primary: mat-palette($mat-custom);
      ...
  

  调色板中使用的Deafult色调为500（默认），100（较浅）和700（较暗） . 创建自定义配色方案的最简单方法是将调色板复制到from the standard palettes上并根据自己的喜好进行调整 .

  回复于 2024-04-25T20:01:01+08:00