获取其他元素的 Material 2 主题配色方案/调色板 [英] Get Material 2 theme color scheme/palette for other elements

问题描述

我正在构建一个应用程序，但我想保持一致的配色方案，可以通过设置进行更改，因此我将材质 (2) 与 angular(2+) 一起使用，但我不确定如何获取元素的配色方案不直接提供使用 color="primary" 为它们着色的能力，所以我留下了试图弄清楚如何获得我的 Material 2 主题使用的颜色/配色方案的能力.我希望它在主题更改时更改，例如我的导航栏将适应主题更改，因为它设置为

但是来自 Material 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 每个组件的主题混合//你正在使用的..默认 {@include angular-material-theme($candy-app-theme);}.光 {$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 set 似乎已折旧，但您可以查看此修复，感谢用户 @wlyles

现在在您的 style.scss 文件中添加以下内容(如您所见，我引用了背景色，但您可以将其更改为任何元素以根据需要将您的网站设为主题):

编辑:你不需要把这个自定义的@mixin 元素放在你的 styles.scss 中，你可以把它放在你的任何一个 *name* 中.component.scss 然后简单地导入并包含它，就像你在给定的例子中所做的一样！

@import '~@angular/material/theming';//定义一个接受当前主题的自定义 mixin@mixin 主题颜色抓取器($theme) {//解析主题并为调色板中的每种颜色创建变量$primary: map-get($theme, primary);$accent: map-get($theme, Accent);$warn: map-get($theme, warn);//创建主题特定样式.primaryColorBG {背景色:垫色($primary)；}.accentColorBG {背景色:垫色($accent)；}.warnColorBG {背景色:垫色($警告)；}}

现在转到用于主题化 Material 2 项目的 theme.scss 文件，如果您需要主题化帮助，请查看:

蓝色主题活跃

I am building an application but I want to keep a consistent color scheme that can be changed with settings so im using Material (2) with angular(2+), but I am not sure how to get the color scheme on elements that dont directly offer the ability to color them with color="primary" so im left with trying to figure out how to obtain the color/color scheme that my Material 2 theme uses. And i want it to change when the theme changes, for instance my navbar will adapt to the theme change because its set to

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

But a grid element from Material 2 doesnt take the same argument so Im left to attempt to style it in a close enough color or simply not match it at all (and it wont adjust to theme changes) as seen here:

I want it to match the color with the theme mat, which is here (and gets changed on options selected in navbar settings)

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

解决方案

I found an awesome workaround!!!! I'm so excited to show this because its been bugging me how to implement this for ages. So here goes; First, change all of your css files to scss;

For existing projects

• Run in console ng set defaults.styleExt=scss

(ng set seems to have been depreciated, but you can check out this for a fix thanks to user @wlyles get/set have been deprecated in favor of the config command )

• Rename all existing .css files to .scss
• Manually change the file extention of styles in .angular-cli.json from .css to .scss
• If you didnt use a tool like WebStorm Refactor to rename then manually change all the styleUrls from .css to .scss

For future projects

• Just for your new project simply use ng new your-project-name --style=scss

• For all new projects to use scss use ng set defaults.styleExt=scss --global

Now you will need to have a theme.scss file in your app root like so:

Now in your style.scss file you want to add the following (as you can see I referrence background-color but you can change this to any element to theme your site however you want):

EDIT: You dont NEED to put this custom @mixin element in your styles.scss you can put it in any one of your *name*.component.scss and then simply import and include it the same way you do with the example given!

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

Now go to your theme.scss file that you use to theme your Material 2 items, if you need help theming check this out: Material 2 Github - Theming guide

Now open your theme.scss and import your style.scss, since my theme.scss is within the root of the /src/app/theme.scss folder I must first go out of it to reference my /src/styles.scss global styling file like so;

@import '../styles';

Then we must actually include our new custom @mixin we created in ALL our themes (if you have multiple like I do, so it changes color according to current selected theme).

Include it above the actual angular-material-theme include, like so:

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

If you have any themes like me add it in the same position like so:

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

}

You can see I added my theme-color-grabber above the include, it doesnt really matter if its above or below the actual theme because its getting the themes colors which is the main point.

My whole themes.scss looks like this:

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

}

And finally we can now call on our themes color for a background ANYWHERE!, for instance I give a mat-grid-tile the 'primary' color (it doesn't take the color='' argument, like other elements such as mat-toolbar) by simply setting its class to the appropriate class name like so:

EDIT: In each of your components scss files, you will need to import '<path-to>/theme.scss' in order for your theme to apply to that component. Don't import theme.scss in styles.scss because that will create an import loop!

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

Finally our result will look like this!:

Red theme active

Blue theme active

这篇关于获取其他元素的 Material 2 主题配色方案/调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！