如何为 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);
    }
}

Answer 2

最简单的方法是在顶部元素之一上设置 class，然后使用 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]]">

更改属性 theme 以设置新的 CSS class。就这么简单。请注意 class 属性.

中的 $

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

How to dynamically skin Polymer app

javascript

polymer

polymer-2.x