title: How to change the theme colors in Vuetify in standalone/CDN mode?
body: <p>I am trying to change the named colors in Vuetify so that the visual controls in use around the application inherit the theme centrally and won't require individual color definitions for each component.</p>
  
  <p>The <a href="https://vuetifyjs.com/en/style/theme" rel="nofollow noreferrer">Vuetify theme docs</a> say this about changing theme colors:</p>
  
  <blockquote>
    <p>This can be easily changed. Simply pass a theme property to the
    Vue.use function. You can choose to modify all or only some of the
    theme properties, with the remaining inheriting from the default.</p>
  </blockquote>
  
  <p>However, I am not seeing this work in practice in standalone/CDN mode with version v1.3.12.</p>
  
  <p><em>Please note</em> that vue-cli is not used when you load Vue.js from a CDN, and we're very happy working that way as our focus right now is on rapid micro-front-end development.</p>
  
  <p><a href="https://codepen.io/graham-sportsmgmt/pen/oJvPzy" rel="nofollow noreferrer">This codepen</a> shows the code as in the Vuetify docs example, but the colors of the buttons don't change and they remain the default colors.  I have even changed the error color to Magenta (<code>#ff00ff</code>) to make that very apparent when it works:</p>
  
  <p>JavaScript:</p>
  
  <pre><code>Vue.use(Vuetify, {
    theme: {
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#ff00ff'
    }
  });
  
  new Vue({
    el: '#app',
    data: () =&gt; ({
      //
    })
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-content&gt;
        &lt;v-container grid-list-xl&gt;
          &lt;v-btn&gt;Default&lt;/v-btn&gt;
          &lt;v-btn color='primary'&gt;Primary&lt;/v-btn&gt;
          &lt;v-btn color='secondary'&gt;Secondary&lt;/v-btn&gt;
          &lt;v-btn color='accent'&gt;Accent&lt;/v-btn&gt;
          &lt;v-btn color='error'&gt;Error&lt;/v-btn&gt;
        &lt;/v-container&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To show that this issue is not limited to CodePen, here is my local project that has a v-navigation-drawer with the error class, and the custom theme color set to Magenta:</p>
  
  <p><a href="https://i.stack.imgur.com/ilQPs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ilQPs.jpg" alt="enter image description here"></a></p>
  
  <pre><code>v-navigation-drawer.error(app fixed mini-variant='true')
  </code></pre>
  
  <p>I understand that this type of question has been asked before but <a href="https://stackoverflow.com/questions/49116469/how-to-change-theme-colors-on-nuxt-vuetify-starter-template">this question</a> was using vue-cli and nuxt (i.e. not standalone) and <a href="https://stackoverflow.com/questions/48618078/vuetify-theme-doesnt-change">this question</a> was a Vuetify version pre-1.0.  What makes this question different is the standalone/CDN aspect.</p>