在 v12 角度材料中，如何从任何 sass 文件中的自定义主题中获取颜色

Question

我按照最后一个 angular material 12 指南创建了我的自定义主题，它运行良好，我还成功地为组件创建了一个自定义样式文件，例如通过在 :hover 上添加不同的背景颜色来重载按钮样式.

我的问题是我找不到在组件 sass 文件中简单引用调色板颜色的方法，就像我们可以通过在 styles.sass 项目根样式文件中声明一个变量来实现的那样：

styles.sass：

:root
  --color-primary-hover: #007bc7 
  --color-primary: #005e98

然后在任何组件 sass 文件中：

.my-class
   background: var(--color-primary)

显然我可以这样，但我必须在两个不同的文件中维护我的颜色，在根 style.sass 文件和我定义整个调色板的 my-theme.scss 文件中。

我也尝试了相反的方法，在根 styles.sass 文件中定义我的调色板颜色，然后在 my-theme.scss 文件中创建引用根颜色的调色板，但我无法使其工作：

我的主题.scss

$my-palette:(
  ...
  500: var(--color-primary) // instead of 500: #005e98
  ...
)

我怎样才能以一种简单的方式引用我的调色板的颜色，而不需要繁重的自定义完整组件的方式？

my-theme.scss 文件：

@use '~@angular/material' as mat;
@use './app/shared/custom-styles/button.style.sass' as button;

@include mat.core();

// my custom palette
$back-office-palette: (
  400: #007bc7, // Primary hover
  500: #005e98, // Primary blue
  800: #142733, // Darkest blue  
  A400: #ffe800, // Orange accent hover
  A500: #ffcf00, // Orange accent // accent green tetradic #76E04E
  contrast: (
    400: #ffffff, // White (contrast of primary hover)
    500: #f2fcff, // Lightest blue (contrast of darkest blue)
    800: #f2fcff, // ????? maybe white
    A400: #472c00, // Contrast for yellow accent
    A500: #472c00  // Contrast for orange accent
  )
);

$back-office-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette($back-office-palette, 500),
      accent: mat.define-palette($back-office-palette, A500),
      warn: mat.define-palette(mat.$red-palette)
    )
  )
);

@include mat.all-component-themes($back-office-theme);    
// Custom back-office styles
@include button.theme($back-office-theme);
    
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

使用 button.style.sass 进行完整组件自定义的示例：

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

@mixin color($back-office-theme)
  // Get palette from back-office-theme
  $color-config: mat.get-color-config($back-office-theme)
  $primary-palette: map.get($color-config, 'primary')

  // custom primary button with hover
  .bo-primary-button
    background-color: mat.get-color-from-palette($primary-palette, 500)
    color: mat.get-color-from-palette($primary-palette, 200)
  .bo-primary-button:hover
    background-color: mat.get-color-from-palette($primary-palette, 400)
    color: mat.get-color-from-palette($primary-palette, 100)
    
@mixin theme($back-office-theme)
  $color-config: mat.get-color-config($back-office-theme)
  @if $color-config != null
    @include color($back-office-theme)

根样式文件styles.sass

// Palette colors duplicates
:root
  --color-primary-hover: #007bc7 // 400
  --color-primary: #005e98 // 500
  --color-dark-background: #142733 // 800
  --color-accent: #ffcf00 // 800

*
  margin: 0
  padding: 0
  box-sizing: border-box

ul
  list-style: none

Answer 1

所以要从任何地方访问您的主题颜色，请移动 my-theme.scss 文件中的 :root 声明：

// First declare your colors in variables 
// (all colors you need, not only the one in the palette, 
// like for a green success buttonfor example)
$my-success: #408526; 
$my-primary-hover: #007bc7;
$my-primary: #005e98;
$my-primary-dark: #142733;

// Then use these variables to define your palette:
$my-palette: (
  50: #ffffff,
  100: $my-primary-hover,
  200: $my-primary,
  900: $my-primary-dark,
  contrast: (
     ...
  )
);

// Then declare the global variables using the first $ variables:
:root {
  --my-success: #{$my-success};
  --my-primary-hover: #{$my-primary-hover};
  --my-primary: #{$my-primary};
  --my-primary-dark: #{$my-primary-dark};
}

然后，您可以在任何组件 sass 文件 my-component.sass 中引用您定义的颜色：

.my-class
  background: var(--my-primary-dark)