Update shared styles with JavaScript application wide in Polymer 2.0

Question

I have a shared-styles element that keeps most of my applications colors. I can easily change the colors manually in shared-styles.html, and all of my other components can inherit from there if I use the CSS variables.

My problem is I need to update the CSS variables in shared-styles.html and have all the other components that inherit the CSS variables to update their colors accordingly. Below is my shared-styles.html. For brevity, I removed all the 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 am including them in the other components. For example:

<dom-module id="test-element">
  <template>
    <style include="shared-styles">

score 5 · Accepted Answer · answered Mar 31 '17 at 22:41

The shared style is not a Polymer element, so it should not extend Polymer.Element and should not have a <script> tag. 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 in the root element (e.g., <my-app>) to apply a global style in Polymer 2.0. Note that all elements under <my-app> would inherit the newly specified styles.

Example

Here are instructions using Polymer CLI's polymer-2-starter-kit template:

Install the bleeding edge Polymer CLI (npm install polymer-cli@next), required for the polymer-2-starter-kit template.

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 a <button> to the menu, which will change the value of --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's 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 the default browser.
Click the button in the menu to change the color of the toolbar and the circles in each page. It should look like this:

GitHub project

Update shared styles with JavaScript application wide in Polymer 2.0

1 Answers1

Example