aries12 aries12 - 24 days ago 9
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">
<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>





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


How can I make it to work?

Answer

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.

Comments