角度主题

Question

我希望在我的 Angular (5) webapp 中实现一个主题。我没有对所有东西都使用 Angular Material（即我只使用输入字段和某些组件）

我正在寻找一种主题解决方案，我可以在运行时使用/控制/更改，而不必重新编译我的应用程序。

我使用 SCSS/Sass。

我目前做了什么：（在一个非常基本的例子中）

变量.scss

$color-1: #fff;
$color-2: #000;

测试组件/测试组件.scss

@import "../variables.scss";

.test {
    color: $color-1;
    border: 1px solid $color-2;
}

自从我开始开发我的应用程序以来，我只是将值分配给 SCSS 变量并使用它们，但稍微下线我想实现一个体面的主题解决方案，我可以在运行时控制主题，因为变量是仅在编译时设置。

我调查的其他内容：

我遇到了this article，这似乎是一个不错的实现想法，但是在组件级别我不完全确定它的有效性，因为深度嵌套的组件将无法看到容器的类例如，围绕他们的路由器。

还有其他想法吗？重申一下，我不希望修改我拥有的 Angular Material 主题。

编辑 1：

我来across this magical post，早上会做一些编码，看看我能用它做什么。

Answer 1

尤里卡！

所以我最终制定的解决方案效果很好，让我可以轻松地为我想要主题的每个组件修改现有的 SASS。

我采用here 使用的概念并修改了辅助函数以适应您可能希望在主题中查找的任意数量的键（而不是像示例中那样只有 2 个级别）。

为了让它像我一样在 Angular 应用程序的上下文中工作，我使用了:host-context 选择器：

@mixin theme-this($themes: $themes) {
    @each $theme-name, $theme in $themes {
        :host-context(.theme-#{$theme-name}) & {
            $theme-map: $theme !global;

            @content;

            $theme-map: null !global;
        }
    }
}

然后在您的基础组件中，使用相关主题类 (.theme-x) 将您的所有内容包装在一个 div 中，并且任何生成的 CSS 与当前应用于您的基础组件的类匹配的类将自动呈现在浏览器。

像这样处理您的主题的一个很酷的事情是您可以在运行时更改它。

我添加了一个主题服务来包含当前选择的主题，稍后我将对其进行修改以将主题存储在您的浏览器本地存储/用户 cookie/等中。