Vuetify conditional dark theme

Yes dark or light are not attributes, they are props which can take values, in this case true or false

You can find this in vuetify's documentations.

Props are the properties which are used for communication with child components. And are prefixed with : in order to distinguish it with normal properties.

Coming to the solution.

<v-app :dark="true"> 

or

<v-app :dark="false"> 

You can replace true or false with any reactive data options or computed properties to make the theme change programmatically.

As documentation says you can just update variable this.$vuetify.theme.dark:

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

To be able to persist theme with localstorage

Inside plugins/vuetify.js or plugins/vuetify.ts add this:

export default new Vuetify({
  theme: {
    //
    dark: localStorage.getItem('theme') === 'dark',
    //
  }
})

then on the button you want to switch theme apply the following function:

switchTheme() {
  this.$vuetify.theme.dark = !this.$vuetify.theme.dark;

  localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light');
}