How to change --primary-color variable in polymer if one is loading components through PolyGit

I'm using polygit to load the polymer components. Is there any way I can override --primary-color without any CSS hacks?

This is the way I'm loading polymer....

<base href="http://polygit.org/polymer+v1.4/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-input/paper-textarea.html">

Solution

Use this in your custom element

:host{
  --primary-color:blue;
}

Or you if you are doing it in HTML then use custom-style and update the value in :root to apply it everywhere, or inside element to apply it on a particular element

Apply it to all the elements

<style is="custom-style">
  :root{
     --primary-color:blue;
  }

Apply it to single element

<style is="custom-style">
  paper-card{
     --primary-color:blue;
  }

Alternately if you are designing an app i'll recommend to create app-theme.html which will be your central repository for your application theme and import the app-theme using link tag.

Please read polymer's documentation for more details on styling or check out this polycast