如何在角度材料 2 中获得当前应用主题的主色或强调色 [英] How to get primary or accent color of currently applied theme in angular material 2

查看：51 发布时间：2021/11/10 2:21:19 angular angular-material2

本文介绍了如何在角度材料 2 中获得当前应用主题的主色或强调色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 angular material design 2 构建一个具有多个主题的应用程序.我创建了多个主题，而且效果非常好.使用本指南:Angular Material design theme

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

解决方案

我不确定这是否是正确"的方法，但它有效，所以我现在正在使用它.如果有更好的方法，我会适应.我的目标是能够根据当前应用的 Material 主题使用不同的颜色设置非 Material 元素(例如标准 DIV、SPAN 等)的样式.需要结合 Material 2 和 Angular 2 元素才能使这一切正常工作.

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

@import '~@angular/material/_theming.scss';@include mat-core();//默认主题:$primary: mat-palette($mat-blue,800);$accent: mat-palette($mat-teal);$theme: mat-light-theme($primary, $accent);@include angular-material-theme($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 文件的片段:

@import '../../themes/main-theme';//<-- 上面显示的主题文件//默认调色板前景/背景:$light-foreground-palette: map-get($theme, foreground);$light-background-palette: map-get($theme, background);//深色调色板前景/背景:$dark-foreground-palette: map-get($dark-t, foreground);$dark-background-palette: map-get($dark-t, background);.浅色{背景色:垫色($primary，默认)；颜色:mat-color($light-foreground-palette, text);}.深色{背景色:垫色($dark-p，默认)；颜色:mat-color($dark-foreground-palette, text);}

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

然后在需要的地方，我使用 ngClass 动态应用类，具体取决于全局 isDarkTheme 变量的值:

<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">...我的内容...

我有一个 div 使用相同的 ngClass 方法包装我的整个应用程序，以应用 darkTheme 类或不应用 isDarkTheme 类的值代码>变量.这一次处理了我整个应用程序中的所有 Material-aware 元素，我只在特定的非 Material 元素上使用 light-colors 和 dark-colors我需要的地方.我可能可以将这些结合起来，但现在我保持原样.

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

默认
打火机
较暗

您还可以为 $accent 和 $warn 调色板获取这三个相同的颜色值.

从前景"调色板($light-foreground-palette 和 $dark-foreground-palette 在我上面的代码中):

基础
分隔符
分隔线
已禁用
禁用按钮
禁用文本
提示文本
次要文本
图标
图标
文字
滑动关闭
滑块关闭

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

状态栏
应用栏
背景
悬停
卡片
对话框
禁用按钮
凸起按钮
焦点按钮
选择按钮
选择禁用按钮
禁用按钮切换

以下是我用来将其放在一起的来源:

我承认我只了解这里发生的事情的大约 80%，所以如果有更好的方法，请告诉我...

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

解决方案

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

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

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.

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>

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.

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

default
lighter
darker

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

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

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:

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 中获得当前应用主题的主色或强调色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在角度材料 2 中获得当前应用主题的主色或强调色 [英] How to get primary or accent color of currently applied theme in angular material 2

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何在角度材料 2 中获得当前应用主题的主色或强调色 [英] How to get primary or accent color of currently applied theme in angular material 2

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭