如何获得角度材质2中当前应用主题的主色或强调色

Question

我正在构建一个具有多个主题和角度材料设计的应用程序2.我创建了多个主题,它的工作非常棒.使用本指南:Angular Material设计主题

但问题是,如果用户选择"绿色主题"为例.然后我想以绿色显示他/她的名字.但是,如何在我的组件样式中将当前选定的主题设置为"green",然后在我的用户名类中使用该主变量来更改其颜色

Answer 1

我不确定这是否是"正确"的方法,但它确实有效,所以我现在正在使用它.如果有更好的方法,我会适应.我的目标是能够根据当前应用的Material主题设置不同颜色的非Material元素(例如标准DIV,SPAN等).它采用了Material 2和Angular 2元素的组合,使其全部工作.

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

@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文件中的一个片段:

@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.我用它来控制显示,具体取决于用户是否选择了"黑暗"主题.

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

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

我有一个div包装我的整个应用程序使用相同的ngClass方法应用darkTheme该类或不取决于isDarkTheme变量的值.这样就可以一次性处理我整个应用程序中的所有Material-aware元素,而我只需要使用light-colors和dark-colors我需要的特定非Material元素.我可能会把这些结合起来,但是现在我把事情当作原样.

为了完整性,以下是可以从不同调色板中获取的元素列表:从"主"调色板($primary以及$dark-p上面的代码中):

• 默认
• 打火机
• 暗

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

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

• 基础
• 分频器
• 分频器
• 残
• 禁用按钮
• 禁用文本
• 提示文本
• 次级文本
• 图标
• 图标
• 文本
• 滑盖关闭
• 滑块断活性

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

• 状态栏
• 应用栏
• 背景
• 徘徊
• 卡
• 对话
• 禁用按钮
• 高架按钮
• 聚焦键
• 选择的按钮
• 选择禁用按钮
• 禁用键式切换

以下是我用来将这些内容放在一起的来源:

• https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1
• 如何更改Angular Material2中主要调色板的字体颜色？
• https://material.angular.io/guide/theming-your-components
• 材料中的_theming.scss文件:https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

我会乐意承认只能理解这里发生的80%,所以如果有更好的方法,请告诉我......

Answer 2

我知道这对派对来说已经很晚了,但是在最终找到一个干净的方法之后不想拉一个DenverCoder9.

首先,转到angular material2 github上的这个链接,找出你的主题使用的调色板.(该链接指向版本6,因此请确保将标记更改为您正在使用的任何版本.)

然后variables.scss在项目中的某个位置创建一个文件来存储主题的调色板参考(下面的示例使用调色板作为indigo-pink主题):

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

然后,您可以将variables.scss文件包含在样式表中,并使用它mat-color(<palette>)来获取类的颜色.

/* my-component.scss */
@import "~@angular/material/theming";
@import 'variables.scss';

.my-primary-text {
    color: mat-color($primaryPalette);
}

.my-accent-text {
    color: mat-color($accentPalette);
}

使用此方法,您仍然可以使用预先构建的主题.使用他们发布的文档重新创建主题可能更加清晰,但是现在我对此很满意.

希望这可以为下一个人带来很多痛苦和痛苦.

更新:重新定义默认主题以防止OhGodTheyChangedColorsThisRelease

所以谁知道什么时候角度材料可能会改变他们的主题颜色,所以重新创建它们可能是一个好主意.

因此,在帖子的前一部分的基础上,添加mat-light-theme/ mat-dark-thememixins以重新定义新主题.

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

// re-define the indigo-pink theme
$myDefaultTheme: mat-light-theme($primaryDefault, $accentDefault, $warnDefault);

然后在您styles.scss的应用程序的主根目录中,

/* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';

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

确保<link href=>放入index.html默认样式表中.

大!现在,如果你更新角度材料,他们改变颜色,你的好!,你可以更新应用程序中的颜色,只需将调色板放入其中variables.scss.

Answer 3

You can generate CSS classes and CSS variables from material theme. Basically, you need this function:

@use '../palette';

@mixin generateColors($prefix, $palette) {
  $colors-map: ();

  @each $key, $value in $palette {
    @if $key !=contrast {
      .app-#{$prefix}-#{$key} {
        color: map-get($palette, $key);
      }

    $map: ();
    $map: map-merge($map, ($key: $value));
    $colors-map: map-merge($colors-map, $map);
    }
  }

  :root {
    @each $key, $value in $colors-map {
      --app-#{$prefix}-#{$key}: #{$value};
    }
  }
}

@mixin generate-material-classes {
   @include generateColors(primary, $youtube-primary);
   @include generateColors(accent, $youtube-accent);
   @include generateColors(warning, $youtube-warning);
}

and palette.scss

@use 'sass:map';
@import '@angular/material/theming';

$youtube-primary: (
  10: #c5e4ff,
  20: #9fd2ff,
 ...
);

$youtube-accent: (
  70: #91a4a0,
  ....
);

$youtube-warning: (
 ...
);

This would generate CSS classes and CSS variables so you can use like below:

 <p class="app-primary-50 title"> </p>

 // or using CSS variables
 p {
   title: var(--app-primary-50);
 }

In your case on each theme, you should call the below function.

 .green-theme {
    @include generate-material-classes();
}

You can also check the blog about this topic: LINK.

Answer 4

您可以在 HTML 元素上使用class="mat-primary"和class="mat-accent"来获取主题的主色和强调色。