聚合物改变应用程序颜色

Question

我正在开发一个使用聚合物的应用程序，因为我有一个名为共享样式的文件，如下所示：

<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>

 :host {
    --app-primary-color: red;
    --app-secondary-color: black;
    display: block;
    }

  .card {
    margin: 24px;
    padding: 16px;
    color: #757575;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }

  h1 {
    margin: 16px 0;
    color: #212121;
    font-size: 22px;
  }
  img{
      width: 35px;
      height: 35px;
  }
</style>

我正在做的是我在我的应用程序中使用相同的颜色 --app-primary-color:red 我想做的是我想改变来自某个页面的此颜色值，以便更改后的颜色反映在整个应用程序中。

<link rel="import" href="shared-styles.html">
<dom-module id="my-view">
<template>
<style include="shared-styles">

footer {
    position: fixed;
    background: var(--app-primary-color);
    width: 100%;
    padding: 15px;
    bottom: 0;
    left: 0;
  }
</style>
<paper-button noink  on-tap="_changeColor" >change color</paper-button>

<script>
Polymer({
  is: 'my-view7',
      _changeColor: function(){
      var myElement = document.querySelector("#host");
      myElement.style.--app-primary-color = "blue";
    }
    });

我怎样才能让它工作？

Answer 1

我认为共享风格不可能。

但是，父元素中定义的自定义 CSS 属性可供其子元素访问。由于您有一个 my-view 元素，您可能还有一个父 my-app 元素。您可以在 my-app 的 :host 选择器中移动 --app-primary-color 和 --app-secondary-color。

聚合物改变应用程序颜色

Polymer change app color

javascript

css

polymer

polymer-1.0