Angular 在样式表中使用主题定义的颜色-角度材质

我的应用程序有两个自定义主题，我可以在运行时切换。因此，它们在theme.scss文件中定义主颜色、重音和警告颜色。因此，我可以在标准材质组件上使用这些主题颜色，这些组件在HTML中输入这样的颜色

我现在的问题是，如何在自定义组件的.scss文件中使用这些颜色？例如，我的字体颜色或背景颜色应该通过改变主题来改变

这是我目前的theme.scss文件：

@import "~@angular/material/theming";
@include mat-core();

$primary: mat-palette($mat-yellow);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);

$light-theme: mat-light-theme(
  $primary,
  $accent,
  $warn
);

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

$dark-primary: mat-palette($mat-blue);
$dark-accent: mat-palette($mat-green);
$dark-warn: mat-palette($mat-orange);
$dark-theme: mat-dark-theme(
    $dark-primary,
    $dark-accent,
    $dark-warn
);
.dark-theme {
  color: $light-primary-text;
  @include angular-material-theme($dark-theme);
}

css类.dark主题在运行时放置在应用程序组件上，以切换主题

但我现在该怎么做呢

MyComponent.scss

:host {
    background-color: primary;
}

---

非常感谢您在这方面提供的任何帮助，谢谢！：）

我创建了一个新文件theme.service.ts。 在这个文件中，我定义了我的主题键，并保留了切换主题的函数。在这里，您还可以添加更多主题及其切换功能

export const redTheme= {
  primary: '#f00',
  primaryDark: '#aa0000',
  secondary: '#fff',
  background: '#000'
};

@Injectable({
  providedIn: 'root'
})
export class ThemeService {    
  toggleRed() {
    this.setTheme(redTheme);
  }
  setTheme(theme: {}) {
    Object.keys(theme).forEach(k =>
      document.documentElement.style.setProperty(`--${k}`, theme[k])
    );
  }
}

现在，在main styles.scs中添加将在文件顶部切换的键。确保您具有相同的密钥名称

// styles.scss
@import './app/utils/material/material-custom-theme';
@import '~@angular/material/theming';
@include angular-material-typography($custom-typography);
:root {
  // default theme
  --primary: #00f;
  --primaryDark: #0000bb;
  --secondary: #0f0;
  --background: #000;
}

在此之后，您可以将theme.service导入到您的组件中，在其中切换您的主题（单击按钮后，我会在我的sidenavcomponent中执行此操作）。为了在自定义组件上使用此主题颜色，您需要使用要使用的颜色的键的变量名。比如像这样

// example.component.scss
  .example-custom-class {
    background: var(--primary);
    color: var(--secondary);
    box-shadow: 10px var(--primaryDark);
  }

这就是我在应用程序中处理主题切换的方式。它略过了材质主题化，但通过它，您可以在自定义组件上设置主题颜色。

---

希望我能帮上忙！：）

因此，如果我做对了，您基本上可以在theme.service中设置scss变量的值？是的，我为我要在theme.service文件中实现的每个主题导出一个常量。在my main styles.scss中，我还设置了键值名称。这些键值将随着主题im的键值切换到而切换。