title: Vuetify don't apply default color, components are white
body: <p>i am using Vuetify for my project.
  The issue is that the default theme is white, or black with the props "black".</p>
  
  <p>I checked this post: <a href="https://stackoverflow.com/questions/50003226/vuetify-colors-are-not-showing-up">Vuetify: colors are not showing up</a>
  Even when i put my components code in the v-app, it's still black.</p>
  
  <p>I didn't change anything, i think ?</p>
  
  <p>I use router-vue.</p>
  
  <p><a href="https://i.stack.imgur.com/RwMms.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RwMms.png" alt="enter image description here"></a></p>
  
  <p>Below is my code:
  App.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;router-view /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang="scss"&gt;&lt;/style&gt;
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-card max-width="400"&gt;
      &lt;v-app-bar dark&gt;
        &lt;v-toolbar-title&gt;Formulaire de connexion&lt;/v-toolbar-title&gt;
      &lt;/v-app-bar&gt;
      &lt;v-col&gt;
        &lt;v-form v-model="valid" lazy-validation ref="form"&gt;
          &lt;v-row&gt;
            &lt;v-text-field
              :rules="rulesLogin"
              label="Identifiant"
              v-model="identifiant"
            &gt;&lt;/v-text-field&gt;
          &lt;/v-row&gt;
          &lt;v-row&gt;
            &lt;v-text-field
              :rules="rulesLogin"
              type="password"
              label="Mot de passe"
              v-model="motDePasse"
            &gt;&lt;/v-text-field&gt;
          &lt;/v-row&gt;
          &lt;v-row&gt;
            &lt;v-btn color="primary" dark @click="seConnecter"&gt;Se connecter&lt;/v-btn&gt;
          &lt;/v-row&gt;
          &lt;v-row&gt;
            &lt;v-btn color="primary" dark&gt;Mot de passe oublié ?&lt;/v-btn&gt;
          &lt;/v-row&gt;
          &lt;v-row&gt;
            &lt;v-btn color="primary" dark&gt;Pas de compte ? Créer un compte&lt;/v-btn&gt;
          &lt;/v-row&gt;
        &lt;/v-form&gt;
      &lt;/v-col&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import service from "@/services/login.services";
  export default {
    name: "LoginForm",
    data() {
      return {
        valid: true,
        identifiant: "",
        motDePasse: ""
      };
    },
    computed: {
      rulesLogin() {
        return [v =&gt; !!v || "Ce champ est obligatoire"];
      }
    },
    methods: {
      seConnecter() {
        if (this.$refs.form.validate()) {
          const params = {
            identifiant: this.identifiant,
            motDePasse: this.motDePasse
          };
          service.connexion(params);
        }
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  
  </code></pre>
  
  <p>plugins/vuetify.js:</p>
  
  <pre><code>import Vue from "vue";
  import Vuetify from "vuetify/lib";
  
  Vue.use(Vuetify);
  
  export default new Vuetify({});
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import Vue from "vue";
  import App from "./App.vue";
  import "./registerServiceWorker";
  import router from "./router";
  import store from "./store";
  import vuetify from "./plugins/vuetify";
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    vuetify,
    render: h =&gt; h(App)
  }).$mount("#app");
  
  </code></pre>
  
  <p>Thanks =)</p>