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

1 thought on “How to change theme in nuxt vuetify?”

  1. I created a nuxt project thanks to the CLI. I’m not sure on how to make it an easy toggle but you can see it here in the light theme: https://codesandbox.io/s/vuetify-theme-remove-dark-iv8s4?file=/pages/index.vue

    You need to make changes into the vuetify.options.js and set dark: false, then even if you have a <v-app dark>, it will still use the only available light theme.

    EDIT: to toggle the theme, you can use this.$vuetify.theme.dark as a setter. This info was taken from here: https://github.com/nuxt-community/vuetify-module/issues/213#issuecomment-551972535

    Reply

Leave a Comment