title: Vuetify input color property works only when focused
body: <p>I'm trying to understand how Vuetify's input <code>color</code> property is working and I can't find it in <a href="https://vuetifyjs.com/en/components/inputs" rel="nofollow noreferrer">documentation</a>, which simply states:</p>
  
  <blockquote>
    <p><code>color</code></p>
    
    <p><em>Applies specified color to the control - it can be the name of material color (for example <code>success</code> or <code>purple</code>) or css color (<code>#033</code> or <code>rgba(255, 0, 0, 0.5)</code>). You can find list of built in classes on the colors page.</em></p>
  </blockquote>
  
  <p>What I'm observing is that the <code>color</code> has effect only when the control has focus <a href="https://codepen.io/rustyx/pen/bGGerde?editors=1010" rel="nofollow noreferrer">[LIVE DEMO]</a>, and goes back to default color when the control loses focus.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-text-field color="orange" label="label" /&gt;
  </code></pre>
  
  <p>Focused:</p>
  
  <p><a href="https://i.stack.imgur.com/M4xks.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M4xks.png" alt="Focused"></a></p>
  
  <p>Not focused:</p>
  
  <p><a href="https://i.stack.imgur.com/4VXcG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4VXcG.png" alt="Not focused"></a></p>
  
  <p>Is this by design, and is it specified anywhere? </p>
  
  <p>Most importantly, how to affect the <code>color</code> of the <strong>not-focused</strong> state (preferably without custom CSS)?</p>