动态更改使用 Polymer 构建的应用程序样式的最佳方法是什么？

Question

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

---

我发现 Polymer 自己在此处描述的这种方法非常有用 using custom style at document level（使用 .html 文件）

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

基本上我们定义了一个my-theme.html，它定义了应用程序样式中使用的变量，看起来像这样：

<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 文件中。

---

然后我在stackoverflow上找到this方法来动态改变样式。

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不会产生相同的效果.

有没有办法让它按我的意愿工作？是否有更好的解决方案来实现我的目标？

Answer 1

当然，您必须使用自定义 CSS 属性和 mixin。如果您的网站样式正确，则可以很容易地切换到不同的主题。

您可以通过以下方式更改自定义 CSS 属性值：

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

使用 var(--my-toolbal-color) 的每条 css 规则都会在调用一个 ore 函数后变为蓝色：

this.updateStyles();

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

希望这会有所帮助，这就是您要寻找的东西。因为我觉得你描述的太复杂了。

Answer 2

对它不是很满意，但它确实有效：

<link rel="import" href="my-css.html">

<dom-module id="my-app">
  <template>
    <style include="my-css"></style>
    <button class="btn-primary-dark">Dark button</button>
    <button class="btn-primary-light">Light button</button>
    <button class="btn-primary-default">Default button</button>
    <br><br>
    <button on-click="setTheme1">Set theme 1</button>
    <button on-click="setTheme2">Set theme 2</button>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }

      // Dynamicaly change vars
      setTheme1() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#689F38',
          '--default-primary-color' : '#8BC34A',
          '--light-primary-color' : '#DCEDC8',
          '--text-primary-color' : '#212121'
        });
      }
      setTheme2() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#1f8f37',
          '--default-primary-color' : '#818bbf',
          '--light-primary-color' : '#f0e82f',
          '--text-primary-color' : '#333333'
        });
      }

    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

我的-css.html

<dom-module id="my-css">
  <template>
    <style>
      .btn-primary-dark {
          background-color: var(--dark-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-light {
          background-color: var(--light-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-default {
          background-color: var(--default-primary-color);
          color: var(--secondary-text-color);
      }
    </style>
  </template>
</dom-module>