Updating common styles using JavaScript application in Polymer 2.0
I have an element shared-styles
that retains most of the colors in my applications. I can easily change the colors manually in shared-styles.html
, and all my other components can inherit from there if I use CSS variables.
My problem is that I need to update the CSS variables in shared-styles.html
and have all other components inherit the CSS variables in order to update their colors accordingly. Below is mine shared-styles.html
. For brevity, I've removed all variables except --app-primary-color
.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style is="custom-style">
:host {
--app-primary-color:#2196F3;
}
</style>
</template>
<script>
class SharedStyles extends Polymer.Element {
static get is() { return 'shared-styles'; }
ready(){
super.ready();
console.log('update css');
this.updateStyles({'--app-primary-color': 'red'});
}
}
window.customElements.define(SharedStyles.is, SharedStyles);
</script>
</dom-module>
This is how I incorporate them into other components. For example:
<dom-module id="test-element">
<template>
<style include="shared-styles">
source to share
The generic style is not a Polymer element, so it should not extend Polymer.Element
and should not be tagged <script>
. It should be defined like this:
shared styles.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>
:host {
--app-primary-color: #2196F3;
}
</style>
</template>
</dom-module>
Then call this.updateStyles
on the root element (for example <my-app>
) to apply the global styling in Polymer 2.0. Please note that all elements under <my-app>
inherit the newly specified styles.
Example
Following are the instructions using the Polymer CLI template polymer-2-starter-kit
:
-
Set the curing CLI paint (
npm install polymer-cli@next
) required for the templatepolymer-2-starter-kit
. -
Run:
mkdir polymer-2-shared-styles-demo cd polymer-2-shared-styles-demo polymer init polymer-2-starter-kit
-
In
src/my-app.html
add to the menu<button>
that will change the value--app-primary-color
:<template> <app-drawer-layout fullbleed> <!-- Drawer content --> <app-drawer id="drawer" slot="drawer"> <app-toolbar>Menu</app-toolbar> <!-- **** LINE 77: Add button below **** --> <button on-click="_changeAppColor">Change app color</button> <script> class MyApp extends Polymer.Element { /* *** LINE 130: Define button-click handler below **** */ _changeAppColor() { this.updateStyles({'--app-primary-color': 'red'}); }
-
In
src/shared-styles.html
change.circle
background
to use--app-primary-color
:.circle { /* *** LINE 33: Use --app-primary-color below **** */ background: var(--app-primary-color, #ddd);
-
Run
polymer serve -o
to open the starter kit in your default browser. -
Click a button in the menu to change the color of the toolbar and circles on each page. It should look like this:
source to share