javascript - 如何为 Polymer 应用程序动态换肤

Question

在 Polymer 应用程序中，我想为用户提供从提供的集合中选择特定主题的选项。因此，假设在包装器元素中我有一个名为“theme”的属性，它包含一个像“dark”、“light”这样的值，等。我想根据该值包含一个具有自定义样式的特定文件。

所以我有一个 my-app-wrapper 元素，如果用户未通过身份验证，它包含一些其他元素，或者一个名为 my-app 的元素。现在我尝试重构它，以便我有一个名为 my-app-dark 的新元素，它扩展了 my-app 并将导入添加到我需要的自定义样式中。

所以在一个文件中，假设 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>

在 my-app-wrapper 中我有这样的东西:

<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>

这里的问题是，在包装器元素中，我需要同时导入 my-app 和 my-app-dark。因此，即使我有那个 if 语句并且我使用 my-app，my-app-dark 导入的自定义样式仍然会加载并应用它的样式。

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

Answer 1

我试验了 polymer 1.x 的主题更改，使用事件并以编程方式更改主题。在主 may-app.html 文件中，我将颜色设置为宿主元素中的变量:

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

这些 css 颜色值用于整个子元素。当调用 change-theme 事件时，我使用了 this.customStyle['--some-color'] = 'white'; 和 Polymer.updateStyles( ); 应用颜色更改。

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

在 Polymer 2 中它应该看起来像这样:

_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);
    }
}