title: Ionic 4 change input color
body: <p>I am trying to simply change the color of a text/password input.  Unfortunately, everything to be able to change is hidden behind the <code>#shadow-root</code> so my CSS can't touch it.  </p>
  
  <p>I've tried to simply write:</p>
  
  <pre><code>input {
    color:var(--ion-color-primary) !important;
  }
  </code></pre>
  
  <p>but of course it does not see anything inside the shadow realm.  the HTML is laid out like so:</p>
  
  <pre><code>&lt;ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text"&gt;
      #shadow-root
          &lt;style&gt;&lt;/style
          &lt;input&gt; // Need to edit this one
          &lt;slot&gt;&lt;/slot?
      &lt;input type="hidden" class="aux-input" name="ion-input-0" value=""&gt;
  &lt;/ion-input&gt;
  </code></pre>
  
  <p>The css that's controlling the color of the input is not using a variable that I'm able to change anywhere else</p>
  
  <pre><code>input, textarea, select, button {
      text-rendering: auto;
      color: initial;
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: start;
      margin: 0em;
      font: 400 11px system-ui;
  }
  </code></pre>
  
  <p>but I'm not able to override those.  I feel like I need to do something in the root, but I don't know CSS variables yet.  </p>
  
  <p>is there any way in Ionic 4 to change the input text color??</p>