如何使用 Angular Material 的 m3 主题为基本 HTML 元素设置颜色？

Question

因此，在 m3 之前，我使用了重新启动 scss 文件来设置一个在所有浏览器中都相同的空基数，这是我刚刚从网络上的某处获取的。

由于这个文件使用了几个变量，我把它变成了一个 mixin，我将我的主题传递到其中，如下所示：

@mixin theme($theme) {
  $typography-config: mat.get-typography-config($theme);
  $color-config: mat.get-color-config($theme);

  $base-palette: map.get($color-config, background);
  $primary-palette: map.get($color-config, primary);
  $accent-palette: map.get($color-config, accent);

  body {
    margin: 0;
    font-family: mat.font-family($typography-config, body-1);
    font-size: mat.font-size($typography-config, body-1);
    font-weight: mat.font-weight($typography-config, body-1);
    line-height: mat.line-height($typography-config, body-1);
    color: mat.get-color-from-palette($base-palette, 50);
    text-align: left;
    background: linear-gradient(to bottom, mat.get-color-from-palette($base-palette, 400), mat.get-color-from-palette($base-palette, 600)); // 2
  }

  a {
    color: mat.get-color-from-palette($accent-palette, 500);
    background-color: transparent; // Remove the gray background on active links in IE 10.

    @include hover() {
      color: mat.get-color-from-palette($accent-palette, 300);
  }

  ...
}

然后我会在我的 _theme.scss 中调用这个 mixin

@use './reboot' as reboot;

...

@include mat.all-component-themes($wb-theme);
@include mat.core($wb-typography-config);
@include reboot.theme($wb-theme);

...

但是现在崩溃并出现错误：

X [ERROR] Undefined function.
   ╷
47 │   $typography-config: mat.get-typography-config($theme);

起初，排版仅显示在材质元素上，但在纯 HTML 中却缺失，例如带有段落的文本。我能够通过将应用程序内容放置在导航栏内容元素内来修复背景颜色，并通过包含版式层次结构来修复版式。

...

html {
  @include mat.core-theme(theme.$dark-theme);
  @include mat.all-component-themes(theme.$dark-theme);
  @include mat.typography-hierarchy(theme.$dark-theme);
}

...

但是，这仍然不能解决我的所有问题。如果我向该段落添加链接，则会以默认浏览器颜色显示链接，即 #0000ff 并带有下划线。当然，我也想重新设计它以适应我的应用程序的主题。

据我所知，m3 基本上只使用 css 变量，例如：

.mat-mdc-tab-link .mdc-tab__text-label { 
  color: var(--mat-tab-header-inactive-label-text-color);
  ...
}

但是，链接接收的变量是

color: -webkit-link;

，它根本不是由主题设置的，所以我必须实际给它我需要的值，或者更改属性本身的值，但无论哪种情况，我都需要设置实际颜色。我可以使用变量，但如何设置变量并为其赋予我的主题颜色？

这也不仅仅是链接或一些基本 HTML 元素的问题。我重新设计了所有材质元素以适应应用程序，每个材质元素都有自己的

.scss

文件，其中包含一个 mixin，该文件采用主题并提取我需要设置的颜色，创建原始材质元素中没有的渐变和颜色，所以我真的需要做一些相当重大的改变，并且确实需要颜色来设置它们以满足我需要的任何需要（直接或创建一些变量。我如何使用 m3 做到这一点？

Answer 1

当您使用完全迁移的 m3 主题时：

要设置 html 标签的版式，您需要在 html 中设置 css 类

mat-typography

（应该在正文上设置）。

还要访问 m3 颜色，您可以将

get-theme-color

与调色板 https://material.angular.io/guide/theming-your-components#reading-tonal-palette-colors 或角色 https://material .angular.io/guide/theming-your-components#reading-color-roles

要访问排版，请使用

get-theme-typography

https://material.angular.io/guide/theming-your-components#reading-typescale-properties

您可以使用类

mat-app-background

https://material.angular.io/guide/theming#application-background-color

向应用程序添加背景