How to change theme in nuxt vuetify?

I am new to nuxt and vue and I am trying to change color theme from dark to light. My project was generated by nuxt cli and I have got this versions:

"dependencies": {
"core-js": "^3.8.3",
"nuxt": "^2.14.12",
"vuetify": "^2.4.4"
}
"devDependencies": {
   "@nuxtjs/vuetify": "^1.11.3"
}

I am learning how to do this from this link: https://vuetifyjs.com/en/features/theme/

But actually when I am trying to change some colors or theme nothing happens. I was trying to pass light or dark props but still nothing happens

<v-app dark>...</v-app>

plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#00bcd4",
        secondary: "#8bc34a",
        accent: "#3f51b5",
        error: "#e91e63",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
    }
  }
});

51 thoughts on “How to change theme in nuxt vuetify?”

Leave a Comment