aries12 aries12 - 1 year ago 97
CSS Question

Polymer change app color

I am working on an app using polymer in that I have a file called shared styles which looks like this:

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

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

: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;
width: 35px;
height: 35px;

Here what I am doing is I am using the same color --app-primary-color:red all over my app what I want to do is I want to change this color value from some page so that the changed color reflects all over the app.

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

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

is: 'my-view7',
_changeColor: function(){
var myElement = document.querySelector("#host"); = "blue";

How can I make it to work?

Answer Source

I don't think it is possible from shared-style.

However, custom CSS properties defined in a parent element are accessible by its children. Since you have a my-view element, you probably also have a parent my-app element. You can move --app-primary-color and --app-secondary-color in my-app's :host selector.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download