Question

我为我的应用程序有2个自定义主题，可以在运行时进行切换。因此，它们在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-theme在运行时放置在应用程序组件上，以切换主题。

但是我现在该怎么做：

MyComponent.scss

:host {
    background-color: primary;
}

非常感谢您的帮助，谢谢！：）

Answer 1

我创建了一个新文件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])
    );
  }
}

现在在您的主要styles.scss中，添加将在文件顶部切换出的键。确保您使用相同的键名。

// 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);
  }

这是我在应用程序中处理主题切换的方式。它略微绕过了材料主题设置，但是您可以在自定义组件上设置主题颜色。希望我能够提供帮助！：）

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

1 个答案: