在样式表-角度材质中使用主题定义的颜色
在样式表-角度材质中使用主题定义的颜色
提问于 2020-07-12 21:20:20
我有2个自定义主题为我的应用程序，我可以在运行时切换。因此，它们在theme.scss文件中定义了原色、重音和警告的颜色。所以我可以在标准的material-components上使用这些主题颜色，它在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-class .dark主题在运行时放置在app-component上，以切换主题。
但是我现在怎么做这样的事情：
MyComponent.scss
:host {
background-color: primary;
}非常感谢大家的帮助，谢谢！:)
回答 1
Stack Overflow用户
发布于 2020-07-12 22:59:15
我创建了一个新文件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导入到您的组件中，在其中切换主题(我在单击按钮时在我的switch组件中执行此操作)。为了在您的自定义组件上使用此主题颜色，您需要使用您想要使用的颜色的键的变量名称。例如，像这样
// example.component.scss
.example-custom-class {
background: var(--primary);
color: var(--secondary);
box-shadow: 10px var(--primaryDark);
}这就是我在应用程序中处理主题切换的方式。它有点绕过了材料主题，但是有了这个，你可以在你的自定义组件上设置主题颜色。希望我能帮上忙！:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62866579
复制相关文章
相似问题
腾讯云开发者
