如何在角形材质2中获取当前应用的主题的原色或强调色

问题描述

我正在用角材料设计2构建具有多个主题的应用程序.我创建了多个主题，它的运行效果非常好.使用此指南:角度材料设计主题

I'm building an app with multiple theme with angular material design 2. I created multiple theme and it's working really great.Using this guideline : Angular Material design theme

但是问题是，例如，如果用户选择绿色主题".然后，我想用绿色显示他/她的名字，等等.但是如何在我的组件样式中获得当前选择的主题(在这种情况下为绿色")，然后在用户名类中使用该主变量来更改其颜色

But the problem is that if user select "green theme" for example. Then I want to display his/her name in green and so. But how can I get the currently selected theme in this case "green" in my component style and then use that primary variable in my user name class to change its color

推荐答案

我不确定这是否是正确"的方法，但是它可以工作，所以我现在就使用它.如果有更好的方法，我会适应.我的目标是能够根据当前应用的材质"主题为不同材质的非材质元素(例如标准DIV，SPAN等)设置样式.它结合了Material 2和Angular 2元素才能使它们全部起作用.

I'm not sure if this is the "correct" way to do it, but it works, so I'm running with it for now. I'll adapt if there's a better way. My goal was to be able to style non-Material elements (such as standard DIVs, SPANs, etc) with different colors depending on which Material theme was currently applied. It took a combination of Material 2 and Angular 2 elements to make it all work.

这是我所做的:我的自定义主题文件如下所示:

Here is what I did:My custom theme file looks like this:

@import '~@angular/material/_theming.scss';

@include mat-core();

// default theme:
$primary: mat-palette($mat-blue,800);
$accent: mat-palette($mat-teal);
$theme: mat-light-theme($primary, $accent);

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

// "dark" theme
$dark-p: mat-palette($mat-blue-grey, 500);
$dark-a: mat-palette($mat-blue-grey,900);
$dark-t: mat-dark-theme($dark-p, $dark-a);

.darkTheme {
  @include angular-material-theme($dark-t);
}

我的应用程序scss文件中的摘录:

A snippet from my application scss file:

@import '../../themes/main-theme';  //  <-- the theme file shown above

//default palette forground/background:
$light-foreground-palette: map-get($theme, foreground);
$light-background-palette: map-get($theme, background);

//dark palette forground/background:
$dark-foreground-palette: map-get($dark-t, foreground);
$dark-background-palette: map-get($dark-t, background);

.light-colors{
    background-color : mat-color($primary, default);
    color: mat-color($light-foreground-palette, text);
}
.dark-colors{
    background-color : mat-color($dark-p, default);
    color: mat-color($dark-foreground-palette, text);
}

在我的主题"服务中(尽管您可以在任何服务中使用它，只要它在全球范围内可用，或者至少在您需要的任何地方都可用)，我定义了一个简单的布尔变量isDarkTheme.我用它来控制显示，具体取决于用户是否选择了深色"主题.

In my "theme" service (although you could do it in any service, as long as it's available globally, or at least anywhere you need it), I defined a simple boolean variable isDarkTheme. I use that to control display depending on whether the user has selected the "dark" theme.

然后，根据需要，根据全局isDarkTheme变量的值，使用ngClass动态应用类:

Then wherever I need to, I use ngClass to apply classes dynamically, depending on the value of the global isDarkTheme variable:

<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>

我有一个div使用相同的ngClass方法包装我的整个应用程序，以应用darkTheme类还是不使用isDarkTheme变量的值.这可以一口气处理整个应用程序中所有可识别材料的元素，而我只在需要的特定非材料元素上使用light-colors和dark-colors.我可能可以将它们结合起来，但是现在我将一切保持原样.

I have a div wrapping my entire application using the same ngClass approach to either apply the darkTheme class or not depending on the value of the isDarkTheme variable. This take care of all Material-aware elements in my entire application in one shot, and I just use the light-colors and dark-colors on the specific non-Material elements where i need to. I could probably combine these, but for now I'm leaving things as-is.

为完整起见，以下是您可以从不同面板中获取的元素的列表:在主要"面板中(上面我的代码中的$primary和$dark-p):

For completeness, here are the lists of the elements you can get from the different palettes:From the "primary" palette ($primary and $dark-p in my code above):

• 默认
• 打火机
• 较暗

对于$accent和$warn调色板，您还可以获得相同的三种颜色值.

You can also get these same three color values for the $accent and $warn palettes.

从前景"选项板(在上面的代码中为$light-foreground-palette和$dark-foreground-palette):

From the "foreground" palette ($light-foreground-palette and $dark-foreground-palette in my code above):

• 基本
• 除法器
• 分频器
• 已禁用
• 禁用按钮
• 禁用文本
• 提示文字
• 次要文本
• 图标
• 图标
• 文本
• 滑行
• 关闭滑块

• base
• divider
• dividers
• disabled
• disabled-button
• disabled-text
• hint-text
• secondary-text
• icon
• icons
• text
• slider-off
• slider-off-active

从背景"面板(在上面的代码中为$light-background-palette和$dark-background-palette):

From the "background" palette ($light-background-palette and $dark-background-palette in my code above):

• 状态栏
• 应用栏
• 背景
• 悬停
• 卡
• 对话
• 禁用按钮
• 升起按钮
• 焦点按钮
• 选定按钮
• 已选择禁用按钮
• 禁用按钮切换

• status-bar
• app-bar
• background
• hover
• card
• dialog
• disabled-button
• raised-button
• focused-button
• selected-button
• selected-disabled-button
• disabled-button-toggle

以下是我用来整合这些内容的来源:

Here are the sources I used to put this together:

• https://medium.com/@ tomastrajan/完整的指南到角度材料主题4d165a9d24d1
• 如何更改主字体的字体颜色Angular Material2中的调色板?
• https://material.angular.io/guide/theming-your-components
• 来自Material的_theming.scss文件: https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

• https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1
• How to change font color of primary palette in Angular Material2?
• https://material.angular.io/guide/theming-your-components
• The _theming.scss file from Material: https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

我会自由地承认只了解这里发生的事情的80％，因此，如果有更好的方法，请让我知道...

I'll freely admit to only understanding about 80% of what's going on here, so if there's a better way, please let me know...

这篇关于如何在角形材质2中获取当前应用的主题的原色或强调色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！