css 如何使用预先构建的角材质主题的颜色?

b1payxdu  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(146)

在我为演示而构建的angular应用程序中,我有一些工具栏,我需要把它与背景区分开来。我愿意使用我使用的预建主题的阴影(紫绿色)。我的理解是,谷歌的材料指南描述了原色的色调:https://material.io/resources/color/#!/?view.left=0&view.right=0,这将是我的案例的理想选择
我在努力想怎么做这么简单的事情。在ionic中,你可以使用color="primary",但是在这里,我在我的样式中使用了一个预构建的主题。

@import '@angular/material/prebuilt-themes/purple-green.css';

我试了好几种方法

@import '~@angular/material/theming';
.chat-header {
  color: mat-color($primary);
}

我的理解是,由于这个预构建的主题只是纯CSS,它没有SCSS变量。但我该如何在我的一个组件中使用它们的颜色呢?
有没有一些预定义的CSS类可以使用?我找过了,没找到?

lxkprmvk

lxkprmvk1#

我猜你将不得不求助于抓取scss版本的主题定义,并根据自己的喜好提取调整后的值。scss源代码似乎没有与材料分发捆绑在一起,所以请转到https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss查看其源代码。然后:
my-custom-theme-definition.scss

@use '@angular/material' as mat;

// taken from https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss

// Define a theme.
$my-custom-primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
$my-custom-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);

$my-custom-theme: mat.define-dark-theme((
        color: (
                primary: $my-custom-primary,
                accent: $my-custom-accent
        )
));

my-custom-theme.scss(在globalstyles.scss中导入一次)

@use '@angular/material' as mat;
@import './my-custom-theme-definition';

// IMPORT ONLY ONCE, AS ALL STYLES ARE BEING OUTPUT

// Include non-theme styles for core.
@include mat.core();

// Include all theme styles for the components.
@include mat.all-component-themes($my-custom-theme);

other-component.scss

@use 'sass:map';
@use '@angular/material' as mat;

@import 'my-custom-theme-definiton';

$hue: 700; // or 50 or some key defined in any palette definition https://github.com/angular/components/blob/master/src/material/core/theming/_palette.scss

.chat-header {
  color: mat.get-color-from-palette(map.get($my-custom-theme, primary), $hue); 
}

相关问题