获取其他元素的角度材质主题配色方案/调色板

2022-02-22 00:00:00 themes css angular angular-material

我正在构建一个应用程序，但我希望保持一致的配色方案，该配色方案可以通过设置进行更改，因此我使用的是角度材质，但是我不确定如何获得元素上的配色方案，这些元素不能直接提供使用color="primary"进行着色的功能，所以我只能尝试弄清楚如何获得我的材质主题使用的配色方案。我希望它在主题更改时更改，例如，我的导航栏将适应主题更改，因为它设置为

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

但是Material中的网格元素没有相同的参数，所以我只能尝试用足够接近的颜色设置它的样式，或者干脆根本不匹配它(并且它不会根据主题更改进行调整)，如下所示：

我希望它的颜色与此处的主题垫匹配(并根据在导航栏设置中选择的选项进行更改)

@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);

解决方案

我发现了一个很棒的解决办法！我很兴奋能展示这一点，因为它一直困扰着我如何实现这一点已经很久了。这就是我要说的；首先，将所有CSS文件更改为SCSS；

现有项目

在控制台中运行ng set defaults.styleExt=scss

(ng集合似乎已折旧，但多亏了user@wlylesget/set have been deprecated in favor of the config command，您可以查看此修复)

将所有现有.css文件重命名为.scss
手动将.angular-cli.json中styles的文件扩展名从.css更改为.scss
如果您没有使用WebStorm Refactor之类的工具重命名，则手动将所有styleUrls从.css更改为.scss

未来项目

仅针对您的新项目，只需使用ng new your-project-name --style=scss
对于要使用SCSS的所有新项目，请使用ng set defaults.styleExt=scss --global

现在，您需要在您的应用程序根目录中有一个主题.scss文件，如下所示：

现在，您希望在style.scss文件中添加以下内容(如您所见，我引用了背景色，但您可以将其更改为任何元素，以随心所欲地为您的站点创建主题)：

编辑：您不需要将此自定义@Mixin元素放入styles.scss中，您可以将其放入您的*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);
  }
}

现在转到您用来为材料创建主题的heme.scss文件2个项目，如果您需要帮助创建主题，请查看以下内容：Material 2 Github - Theming guide

现在打开heme.scss并导入style.scss，因为my heme.scss位于/src/app/theme.scss文件夹的根目录中，所以我必须先走出该文件夹才能像这样引用我的/src/styles.scss全局样式文件；

@import '../styles';

然后，我们必须实际包含我们在所有主题中创建的新自定义@mixin(如果您有多个主题，则它会根据当前选择的主题更改颜色)。

将其包含在实际的角度-材质-主题包含之上，如下所示：

@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);

}

您可以看到，我在include上方添加了theme-color-grabber，它是在实际主题之上还是之下并不重要，因为它获取主题颜色，这才是重点。

我的整个主题.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‘主’颜色(它不接受color=‘’参数，就像其他元素，如mat-Toolbar一样)，只需将其类设置为适当的类名，如下所示：

edit：在您的每个组件SCSS文件中，您需要import '<path-to>/theme.scss'才能将您的主题应用于该组件。不要在styles.scss中导入theme.scss，因为这会创建导入循环！

<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>

最后，我们的结果将如下所示！：

红色主题活动

蓝色主题处于活动状态

相关文章