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: /

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"
      }
    }
  }
});

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./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"
      }
    }
  }
});

• javascript
• vue.js
• vuejs2
• nuxt.js
• vuetify.js

• Did you tried to pass light in the <v-app dark>...</v-app> tag ? To replace dark by light. Or even just remove dark for the tag. – kissu Commented Feb 15, 2021 at 13:35
• Yeah as I said in the question description, and I was trying also to remove this prop and still nothing happens, on app div I am getting 'theme--dark' class anyway – Freestyle09 Commented Feb 15, 2021 at 13:41
• I think this is the fastest way stackoverflow./questions/62005958/… – Cosimo Chellini Commented Feb 15, 2021 at 14:46
• @Freestyle09 Does everything from elements work or style is broken? Try remove /lib on importing Vuetify. – proofzy Commented Feb 15, 2021 at 14:47
• Everything works but only assigning new values to the theme is not working – Freestyle09 Commented Feb 15, 2021 at 20:11

1 Answer 1

I created a nuxt project thanks to the CLI. The working project is hosted here: https://codesandbox.io/s/vuetify-dark-light-theme-iv8s4?file=/pages/index.vue

You need to make changes into the vuetify.options.js as remended in the official docs.

To toggle the theme, you can use this.$vuetify.theme.dark as a setter, I've added some buttons. This info was taken from here: https://github./nuxt-munity/vuetify-module/issues/213#issuement-551972535