title: Using custom theming in Vuetify and pass color variables to components
body: <p>In my <code>index.js</code> file I have manually override the Vuetify <code>theme</code> object with my company's color:</p>
  
  <pre><code>Vue.use(Vuetify, {
    theme: {
      primary: '#377ef9',
      secondary: '#1b3e70',
      accent: '#ff643d',
      error: '#ff643d'
      ...
    }
  </code></pre>
  
  <p>Now, I can use these colors from my templates like so:</p>
  
  <pre><code>&lt;my-text-field name="input text"
      label="text"
      value="text text text text..."
      type="text"
      color="primary"&gt;
  &lt;/my-text-field&gt;
  </code></pre>
  
  <p>What I'm after is using the <code>primary</code> or any other variable in the <code>theme</code> object defined above, inside my template style:</p>
  
  <pre><code>&lt;script&gt;
    import { VTextField } from 'vuetify'
    export default {
      extends: VTextField
    }
  &lt;/script&gt;
  
  &lt;style scoped lang="stylus"&gt;
    label
      color: &lt;seconday color&gt; &lt;-- this is what I'm after
      color: #1b3e70 &lt;-- this works, but not quite good enough for me
  &lt;/style&gt;
  </code></pre>
  
  <p>I can easily just write the hex value of my colors in the style section, but I don't want to repeat myself, and would rather use my <code>theme</code> object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.</p>