角度主题

Question

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

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

我使用SCSS / Sass。

我目前所做的事情：（在一个非常基本的例子中）

variables.scss

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

检测成分/试验component.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 /等中。