Vuetify-module: I can't the theme switch (dark - light)

[riux]

I can't the theme switch (dark - light).
layout.
<v-app :dark="dark"> ....</v-app>
dark = true/false,
nuxt.config
.... vuetify: { customVariables: ['~/assets/variables.scss'], theme: { 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 }, light: { primary: colors.blue.lighten2, accent: colors.grey.lighten3, secondary: colors.amber.lighten3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } },...

[larzon83]

It's in the docs... https://vuetifyjs.com/en/customization/theme

You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false

[riux]

Exactly but it is assumed that if I have two themes configured in my nuxt.config as I mention, then I can change themes specified dark or light in ... of my layouts that are in /layouts/(dark.vue, light.vue).
like this example: https://codepen.io/HarrisWebApps/pen/QrZmrw

[larzon83]

Look again at the docs. Here:
https://vuetifyjs.com/en/customization/theme#light-and-dark
-> you are missing dark: true/false inside the theme object. Should look like this:

That property needs to be there initially to than be able toggling it via this.$vuetify.theme.dark = true/false

Also note, that as of Vuetify v2, the "dark/light" prop no longer has an effect when set on v-app.
So <v-app dark>...</v-app> does nothing.
I know it from the migration guide (https://vuetifyjs.com/en/getting-started/releases-and-migrations) but couldn't find that info anywhere else in the docs.

So, you have to use this.$vuetify.theme.dark = true/false to change your theme. I would do it exactly like the linked v2 switch in the codepen you mentioned: https://codepen.io/HarrisWebApps/pen/gVLKMG

I don't see the need for having two separate layouts (dark.vue, light.vue) for this.

[kevinmarrec]

Theme switch (dark/light) should be switched with this.$vuetify.theme.dark
@riux You could watch a Vuex state and trigger this.$vuetify.theme.dark if needed on change.

[adamsimonini]

@larzon83 you are a god among mere mortals sir

[easherma]

So ... does nothing.

Shouldn't the module for nuxt no longer generate this as part of the code then?

[greenermoose]

Would be great to document this somewhere. Like the OP I wanted to switch between dark and light themes and found the docs extremely confusing. Wish I could simply pass "dark" or "light" to v-app like vuetify used to do, but had to do this instead:

For my dark layouts, add

mounted () {
this.$vuetify.theme.dark = true
}

For my light layouts, add

mounted () {
this.$vuetify.theme.dark = false
}

This sets the theme to dark or light when the page is mounted. If there is a better solution, I'd love to hear it.

Hope this helps the next person who stumbles across this issue!