聚合物更改應用顏色

我在使用聚合物上的應用程序工作，我有一個名爲共享樣式文件，該文件是這樣的：我在做什麼是我使用聚合物更改應用顏色

<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"; 
    } 
    });

我該如何讓它工作？

來源

2016-11-08 aries12

我不認爲這是可能的共享風格。

但是，父元素中定義的自定義CSS屬性可由其子級訪問。由於您有一個my-view元素，因此您可能還有一個父元素my-app。您可以在my-app的:host選擇器中移動--app-primary-color和--app-secondary-color。

來源

2016-11-08 11:58:59 agaudin

ii現在試試..... – aries12

謝謝@agaudin我將--app-primary-color移至my-app，並在my-view中創建了一個綁定，並在my-app中使用了observer來更新 - -app-primary-color在my-view中完成的顏色更改 – aries12

聚合物更改應用顏色

回答

相關問題