Question

在Polymer应用程序中，我想让用户选择从提供的集合中选择某个主题。所以，让我们说在一个包装元素中我有一个名为＆＃34; theme ＆＃34;的属性。它包含类似＆＃34; dark ＆＃34;，＆＃34; light ＆＃34;等的值。我想包含一个特定的文件自定义样式取决于该值。

所以我有一个元素+---------+---------------------------------------------+-------+ |group_id |model_window |values | +---------+---------------------------------------------+-------+ |XXXX |[2017-10-25 00:00:00.0,2017-10-25 01:00:00.0]| 10 | |XXXX |[2017-10-25 00:00:00.0,2017-10-25 02:00:00.0]| 17 | |XXXX |[2017-10-25 00:00:00.0,2017-10-25 03:00:00.0]| 22 | |YYYY |[2017-10-25 00:00:00.0,2017-10-25 01:00:00.0]| 0 | |YYYY |[2017-10-25 00:00:00.0,2017-10-25 02:00:00.0]| 1 | |YYYY |[2017-10-25 00:00:00.0,2017-10-25 03:00:00.0]| 9 | +---------+---------------------------------------------+-------+，如果用户未经过身份验证，则包含其他一些元素，或者包含一个名为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。因此，即使我有if语句并使用my-app-dark，my-app导入的自定义样式仍会加载并应用其样式。

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

Answer 1

我使用事件和以编程方式更改主题，尝试使用聚合物1.x进行主题更改。在主may-app.html文件中，我将颜色设置为host元素中的变量：

<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

最简单的方法是在其中一个顶部元素上设置一个类，然后使用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类。就这么简单。请注意类属性中的$。

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

2 个答案: