动态更改使用Polymer构建的应用程序样式的最佳方法是什么？ [英] What is the best way to dynamically change the style of an application built with Polymer?

问题描述

我的想法是拥有包含特定主题的所有规则的不同文件（.css或.html），并在运行时动态更改Polymer应用程序的外观和感觉。

My idea is to have different files (either .css or .html) containing all the rules for a specific theme and load theme dynamically changing the look&feel of the Polymer application at runtime.

我发现聚合物本身所描述的这种方法非常有用在文档级使用自定义样式（使用.html文件）

I have found pretty useful this method described here by Polymer itself with using custom style at document level (using .html files)

例如，您经常要在文档级别定义自定义属性值，以便为整个应用程序设置主题。由于自定义属性尚未内置到大多数浏览器中，因此您需要使用特殊的自定义样式标记来定义Polymer元素之外的自定义属性。尝试在index.html文件的标记内添加以下代码

Frequently you want to define custom property values at the document level, to set a theme for an entire application, for example. Because custom properties aren't built into most browsers yet, you need to use a special custom-style tag to define custom properties outside of a Polymer element. Try adding the following code inside the tag of your index.html file

基本上我们定义 my-theme .html ，它定义了应用程序样式中使用的变量，如下所示：

Basically we define an my-theme.html, that defines variables used in the application style, that looks like this:

<style is="custom-style">
      /* Define a document-wide default—will not override a :host rule in icon-toggle-demo */
      :root {
        --icon-toggle-outline-color: red;
      }
      /* Override the value specified in icon-toggle-demo */
      icon-toggle-demo {
        --icon-toggle-pressed-color: blue;
      }
      /* This rule does not work! */
      body {
        --icon-toggle-color: purple;
      }
 </style>

我在index.html文件中导入它。

And I import it in my index.html file.

然后我发现stackoverflow 这个方法动态更改样式。

And then I found on stackoverflow this method to change the style dynamically.

HTML

 <link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

---

这里的问题是文件是 rel：stylesheet 并更改其href会导致浏览器重新加载文件并应用更改，在我的情况下，改变html导入的href不会导致相同的效果。

---

The problem here is that the file is a rel: stylesheet and changing its href causes the browser to reload the file and apply the changes, wherease in my case changin the href of the html import doesn't leed to the same effect.

有没有办法让这个按我的意愿运作？有没有更好的解决方案来实现我的目标？

Is there a way to get this to work as I want? Is there a better solution to achieve my goal?

推荐答案

当然，你必须使用自定义CSS属性和mixins。如果您正确设置网站样式，则可以非常轻松地切换到不同的主题。

Definitely, you have to use custom CSS properties and mixins. If you style your website correctly it will be very easy to swap to different theme.

您可以通过执行以下操作来更改自定义CSS属性值：

You can change Custom CSS property value by doing:

this.customStyle['--my-toolbar-color'] = 'blue';

每个使用var（ - my-toolbal-color）的css规则都会变为蓝色，一旦你召集一个矿石函数：

Every css rule that is using var(--my-toolbal-color) will change to color blue, once you call one ore function:

this.updateStyles();

告诉Polymer，嘿我刚刚更新了样式你可以重新渲染css规则..

which tells Polymer, hey i just updated styles can you re-render css rules..

希望这会有所帮助，这就是你要找的东西。因为你所描述的内容太复杂了我认为。

Hope this helps and it's the thing you were looking for. Because what you described was too much complicated i think.

这篇关于动态更改使用Polymer构建的应用程序样式的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！