聚合物在运行时更改自定义样式变量

Question

我有一个应用程序，我想在运行时更改整个主题。我在我的自定义样式标签中定义原色，如下所示：

<style is="custom-style">
  /* Application theme */
  :root {
    --dark-primary-color: #3b280a;
    --default-primary-color: #FDB815;
    --light-primary-color: #fdd85f;
  }
</style>

以后可以为这些变量应用其他值吗？我尝试通过附加

添加新的自定义样式文件

<link rel="import" href="../styles/other-style.html">

到头了，但是不管用。我认为聚合物在一开始就解释了这一点，对吧？我现在正在考虑根本不使用自定义样式并将我的整个应用程序包装在一个元素中，我可以在其中设置带有变量的样式，但这似乎需要很多工作，也许有人有更好的主意？

Answer 1

您可以手动执行此操作

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

查看文档part

聚合物在运行时更改自定义样式变量

Polymer change custom-style variable at runtime

html

javascript

css

shadow-dom

polymer