角度主题 [英] Angular Theming

问题描述

我正在寻求在Angular(5)网络应用程序中实现主题.我没有为所有内容使用Angular Material(即，我只使用输入字段和某些组件)

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

我使用SCSS/Sass.

我目前正在做什么:(在一个非常基本的示例中)

variables.scss

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

test-component/test-component.scss

  @import"../variables.scss";.测试 {color:$ color-1;边框:1px实线$ color-2;} 

自从我开始在我的应用程序上开发以来，我只是为SCSS变量分配了值并使用了它们，但是我想实现一个不错的主题解决方案，在其中我可以在运行时控制主题，因为变量是仅在编译时设置.

我研究过的其他内容:

我遇到了这篇文章，其中实现似乎是一个不错的主意，但是在组件级别，我不完全确定它的效果如何，例如，深度嵌套的组件将无法看到路由器周围的容器是什么类./p>

还有其他想法吗?重申一下，我不希望修改 Angular Material 主题有.

我在这个神奇的帖子中 早上看看我能做什么.

解决方案

尤里卡！

因此，我最终制定的解决方案效果很好，使我可以轻松地为想要设置主题的每个组件修改现有的SASS.

我采用了此处的概念，并修改了辅助函数来满足您可能需要在主题中查找的任意数量的键(而不是像示例中那样的2个级别).

为了像我一样在Angular应用程序中运行它，我使用了

Since I started development on my app I simply assigned values to SCSS variables and used them, but a little down the line I'd like to implement a decent theming solution where I can control the theme during run time, as variables are only set at compilation time.

Additional things I've looked into:

I came across this article which seems like a decent idea to implement, however at a component level I'm not entirely sure how effective it'll be since deeply nested components would not be able to see what a class a container surrounding their router would be, for instance.

Any other ideas? Just to reiterate, I'm not looking to modify the Angular Material theme I have.

EDIT 1:

I came across this magical post, will do some coding in the morning and see what I can do with it.

解决方案

Eureka!

So the solution I formulated in the end works pretty well, allowing me to modify my existing SASS for each component I want themed with ease.

I took the concept used here and modified the helper functions to cater for any amount of keys you might want to look up in your theme (instead of just 2 levels like the example).

To get it working in the context of an Angular application like I did, I used the :host-context selector:

@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;
        }
    }
}

Then in your base component, wrap all of your content in a div with the relevant theme class (.theme-x) and any generated CSS with a class matching the one currently applied to your base component will automatically be rendered in the browser.

One cool thing about handling your theme like this is you can change it at run time.

I added a theme service to contain the currently selected theme, which I'll modify at a later stage to store the theme in your browsers local storage/user cookie/etc.

这篇关于角度主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！