Javascript 如何动态皮肤聚合物应用程序

在Polymer应用程序中，我想让用户从提供的一组主题中选择某个主题。假设在包装器元素中有一个名为“theme”的属性，该属性包含一个值，如“暗”、“光”等。我希望包含一个特定的文件，该文件具有自定义样式，具体取决于该值

因此，我有一个元素

my app wrapper

，如果用户未经身份验证，则该元素包含一些其他元素，如果用户未经身份验证，则该元素称为

my app

。现在我尝试重构它，这样我就有了一个名为

myappdark

的新元素，它扩展了

myapp

，只是将导入添加到我需要的自定义样式中

所以在一个文件中，让我们假设

dark.html

我有如下内容：

<custom-style>
  <style is="custom-style">
    html {
      --custom-theme: {
        --app-primary-color: #990AE3;
        --app-secondary-color: var(--paper-deep-orange-500);
      }
      ;
    }
  </style>
</custom-style>

这里的问题是，在包装器元素中，我需要同时导入

myapp

和

myapp

。因此，即使我有if语句并使用

myapp

，由

myapp-dark

导入的自定义样式仍会被加载并应用其样式

---

我唯一的限制是，我不能使用延迟导入并用Polymer.importHref加载文件，但即使我可以，导入也会在解析CSS规则后发生，因此无法工作。

我使用事件和编程方式更改Polymer 1.x的主题。 在主

may app.html

文件中，我设置了主机元素中变量的颜色：

<style include="shared-styles">
    :host {
         --some-color: black;
     }
</style>

在聚合物2中，它可能看起来像这样：

<template is="dom-if" if="[[_equals(theme, 'dark')]]" restamp>
  <my-app-dark></my-app-dark>
</template>
<template is="dom-if" if="[[!_includes(themes, theme)]]" restamp>
  <my-app></my-app>
</template>

_onChangeTheme() {
    if (this.darkTheme) {
        //change to light theme
        this.updateStyles('--some-color','white');
        this.set('darkTheme', false);
    } else {
        //change to dark theme
        this.updateStyles('--some-color','black');
        this.set('darkTheme', true);
    }
}

---

最简单的方法是在一个顶级元素上设置一个类，然后使用CSS

<style>
  .some-top-element.dark {
    background-color: #000
    color: #fff;
  }

  .some-top-element.light {
     background-color: #fff;
     color: #000;
  }
</style>

<div class$="some-top-element [[theme]]">

.一些顶级元素。黑暗{
背景色：#000
颜色：#fff；
}
.一些顶级元素{
背景色：#fff；
颜色：#000；
}

---

更改属性

主题

以设置新的CSS类。就这么简单。请注意class属性中的$。

这似乎是

的问题。customStyle

未定义（至少在Polymer 2中）。。但我将在此基础上“深入挖掘”，感谢您的建议在Polymer slack channel（）中链接到您发送给我的文档后，我发现我只需要使用一个对象作为参数调用updateStyles，该对象具有我要更新的值的键。。所以非常感谢您的帮助，这+一个AJAX调用来获取特定于主题的文件就成功了

<style>
  .some-top-element.dark {
    background-color: #000
    color: #fff;
  }

  .some-top-element.light {
     background-color: #fff;
     color: #000;
  }
</style>

<div class$="some-top-element [[theme]]">