Search code examples
csspolymer

How do I use polymer 1.0 paper-styles colors?

How can I set the background-color of a paper-toolbar to --paper-teal-500?

  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/paper-styles/paper-styles.html">

  <style is="custom-style">
    paper-toolbar {
        background-color: paper-teal-500;
    }
  </style>
</head>

<body style="margin: 0;">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">

  <paper-toolbar>
    <div title>Tabara</div>
  </paper-toolbar>
Solution

  • Well I managed to figure it out.

    background-color: var(--paper-teal-500);

    will do. Hope it helps anyone in need!