CODEWITHSUNDEEP
nuxt.jsvuetify.js
richxcame
richxcame

Reputation: 151

Nuxt + Vuetify can't change default dark theme's background

I want to overwrite dark theme's default color (in nuxt.config.js | Nuxt + Vuetify), but I can't. When I changed light theme's default theme it changes. Who faced like problem.

themes: {
    dark: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3,
      background: '#13171c'
    },
  },

Thanks for answer...

Upvotes: 0

Views: 657

Answers (2)

Adam Muse
Adam Muse

Reputation: 1

go to the plugin folder

call it vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

export default (ctx) => {
const vuetify = new Vuetify({
theme: {
   dark: false // From 2.0 You have to select the theme dark or light here
   }
 })

 ctx.app.vuetify = vuetify
 ctx.$vuetify = vuetify.framework
}

and make sure to add it to the nuxt.config plugins

  plugins: [
  '@/plugins/vuetify'
  ],

Upvotes: 0

Muluken Getachew
Muluken Getachew

Reputation: 1033

you need to add dark: true

vuetify: {
        theme: {
          dark: true,
          themes: {
            dark: {
              primary: colors.blue.darken2,
              accent: colors.grey.darken3,
              secondary: colors.amber.darken3,
              info: colors.teal.lighten1,
              warning: colors.amber.base,
              error: colors.deepOrange.accent4,
              success: colors.green.accent3,
              background: "#13171c",
            },
          },
        },
      }

Upvotes: 1

Related Questions