apptheme.js

import { PolymerElement, html } from 'https://unpkg.com/@polymer/[email protected]/polymer-element.js';

const styleElement = document.createElement('dom-module');
styleElement.innerHTML = 
  `<template>
      <style>
            paper-button {
                --paper-button: {
                    color : var(--theme-primary-text-color);
                };
            }

            :root, html {
                /* Some polymer elements require these */
                /* paper-list-box */
                --primary-background-color : var(--theme-background-color);
                /* paper checkbox */
                --primary-text-color : var(--theme-primary-text-color);
                --primary-color : var(--theme-background-color);
                /* paper-item */
                --disabled-text-color : var(--theme-disabled-text-color);
                /* paper-tabs */
                
                /* paper-list-box */
                --paper-listbox-background-color : var(--theme-background-color);
                --paper-listbox-color : var(--theme-primary-text-color);

                --paper-menu-button-dropdown-background : var(--theme-background-color);
            }

            paper-listbox {
                color: var(--theme-primary-text-color);
                background-color: var(--theme-dialog-color);
            }

            paper-checkbox {
                --paper-checkbox-checked-color : var(--theme-accent-color);
                --paper-checkbox-checked-ink-color : var(--theme-accent-color);
                --paper-checkbox-label-color : var(--theme-primary-text-color);
                --paper-checkbox-unchecked-color: var(--theme-primary-text-color);
                --paper-checkbox-unchecked-ink-color: var(--theme-primary-text-color);
            }

            paper-tabs {
                --paper-tabs: {
                    background : var(--theme-toolbar-color);
                };
                --paper-tabs-selection-bar-color : var(--theme-accent-color);
            };

            paper-tab {
                --paper-tab-ink : var(--theme-accent-color);
                --paper-fab-background: var(--theme-accent-color);
                --paper-fab-disabled-background: var(--theme-background--color); 
                --paper-fab-disabled-text: var(--disabled-text-color); 
            }

            .btn.primary {
                --paper-button: {
                    color : var(--theme-accent-color);
                };
            }
            
            paper-menu {
                --paper-menu-background-color:var(--theme-background-color);
                --paper-menu-color: var(--theme-primary-text-color);
                --paper-menu-disabled-color: var(--theme-disabled-text-color);
            }

            paper-input, paper-input-container, paper-dropdown-menu {
                --paper-input-container-color: var(--theme-primary-text-color);
                --paper-input-container-focus-color: var(--theme-accent-color);
                --paper-input-container-invalid-color: #ff6e40;
                --paper-input-container-input-color: var(--theme-primary-text-color);
            }

            paper-card {
                background : inherit;
            }

            paper-slider {
                --paper-slider-knob-color: var(--theme-accent-color);
                --paper-slider-active-color: var(--theme-accent-color);
                --paper-slider-pin-color: var(--theme-accent-color);
            }

            paper-toggle-button {
                --paper-toggle-button-checked-bar-color: var(--theme-accent-color);;
                --paper-toggle-button-checked-button-color: var(--theme-accent-color);
                --paper-toggle-button-checked-ink-color: var(--theme-accent-color);
                --paper-toggle-button-unchecked-bar-color: var(--theme-divider-color); 
                --paper-toggle-button-unchecked-button-color: var(--theme-divider-color) ;
            }

            vaadin-grid {
                background: var(--theme-dialog-color);
                color: var(--theme-primary-text-color);
                font-family: Roboto, sans-serif;
                height : 100%;
                border : 2px solid var(--theme-statusbar-color);
                --material-background-color : var(--theme-background-color);
                --divider-color: var(--theme-divider-color);
                --vaadin-grid-header-cell: {
                    background: var(--theme-toolbar-color);
                    color: var(--theme-primary-text-color);
                };
                --vaadin-grid-body-row-hover-cell: {
                    cursor : pointer;
                    background-color: var(--theme-divider-color);
                };
                --vaadin-grid-cell: {
                    cursor : pointer;
                    background: var(--theme-dialog-color);
                    color: var(--theme-primary-text-color);
                };
                --vaadin-grid-body-row-selected-cell: {
                    background-color: var(--theme-selected-color);
                };
            }

            paper-dialog {
                --paper-dialog-background-color : var(--theme-dialog-color);
                --paper-dialog-color : var(--theme-primary-text-color);
                color : var(--theme-primary-text-color);
            }

            ::-webkit-scrollbar
            {
                width: 6px;
                background-color: var(--theme-background-color);
            }

            ::-webkit-scrollbar-thumb
            {
                background-color: var(--theme-accent-color);
            }
        </style>
  </template>`;
styleElement.register('app-theme');