使用 SCSS 变量的 Angular 主题切换

【问题标题】：Angular theme switch using SCSS variables使用 SCSS 变量的 Angular 主题切换
【发布时间】：2020-05-01 19:42:30
【问题描述】：

我正在尝试创建 Angular 主题开关。我已经看过数百个关于使用 Angular Material 进行主题切换的指南。我想要相同的，但使用 SCSS 变量。

我想在我的 style.scss 中定义变量：

.dark {
 $color1: #fff;
 $color2: #fff;
 $color2: #fff;
}

.light {
 $color1: #eee;
 $color2: #eee;
 $color2: #eee;
}

然后在组件中使用这些变量。有可能吗？

【问题讨论】：

标签： angular sass themes

【解决方案1】：

试试这个

在您的 html 文件中

您的默认主题。

<html data-theme="light">

</html>

在您的 css 文件中

html {
height: 100%;
font-family: 'Montserrat';

display: grid;
align-items: center;
justify-items: center;
--bg: #FCFCFC;
--bg-panel: #EBEBEB;
--color-headings: #0077FF;
--color-text: #333333;

}

 html[data-theme='dark'] {
--bg: #333333;
--bg-panel: #434343;
--color-headings: #3694FF;
--color-text: #B5B5B5;

}

根据某些条件切换。

【讨论】：

Angular 环境中如何切换标签 html 的数据主题？