角度主题

我希望在我的 Angular (5) web 应用程序中实现一个主题。我没有将 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 变量并使用它们，但接下来我想实现一个不错的主题解决方案，我可以在运行时控制主题，因为变量仅设置为编译时间。

我研究过的其他事情：

我碰到本文 https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1这似乎是一个不错的实现想法，但是在组件级别，我不完全确定它的效果如何，因为深度嵌套的组件将无法看到其路由器周围的容器是什么类。

还有其他想法吗？只是重申一下，我not想要修改角材料 https://material.angular.io/主题我有。

EDIT 1:

I came 穿过这个神奇的帖子 http://anasfirdousi.com/creating-themeable-components-in-angular.html，早上会做一些编码，看看我能用它做什么。

Eureka!

因此，我最终制定的解决方案效果非常好，使我能够轻松地针对我想要的每个主题组件修改现有的 SASS。

我采用了使用的概念here http://anasfirdousi.com/creating-themeable-components-in-angular.html并修改了辅助函数，以满足您可能想要在主题中查找的任意数量的键（而不是像示例那样只有 2 个级别）。

为了让它像我一样在 Angular 应用程序的上下文中工作，我使用了:主机上下文 https://www.concretepage.com/angular-2/angular-2-4-component-styles-host-host-context-deep-selector-example选择器：

@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 其类与当前应用于基本组件的类相匹配的 CSS 都将自动在浏览器中呈现。

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

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