Polymer在运行时更改自定义样式变量

时间:2015-06-26 15:53:20

标签: javascript html css polymer shadow-dom

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

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

到头部,但它不起作用。我认为聚合物在开始时解释,对吗?我现在正在考虑不使用自定义风格并将我的整个应用程序包装在一个元素中,我可以用变量设置样式,但这似乎很多工作,也许有人有更好的想法?

1 个答案:

答案 0 :(得分:4)

您可以手动执行此操作

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

请参阅文档part