Vuetify3 How to define theme settings

Question

I have some troubles to define theme settings with the new vuetify 3.

Documentation example (for Vuetify3):

// src/plugins/vuetify.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          ..., // We have omitted the standard color properties here to emphasize the custom one that we've added
          green: '#00ff00'
        }
      }
    }
  }
})

I did exactly the same (of course removing ..., in colors), but got an error in chrome console:

Uncaught TypeError: Cannot convert undefined or null to object

Anyone know why this is happens? (I know that it is a new version and the documentation is still under development).

Thanks!

Answer 1

What worked for me in Vue3 and Vuetify 3

[ solved ]

I went to the SRC folder and the Plugins folder, editing the file that comes by default in vuetify.js

file: src/plugins/vuetify.js

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify({
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        variables: {}, // ✅ this property is required to avoid Vuetify crash

        colors: {
          //green: '#00ff00' // cannot use primary color names here, so use a custom color name (such as 'greenish')
          greenish: '#03DAC5',

          // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
          background: '#fbfbfb',
          surface: '#212121',
          primary: '#00ff00',
          'primary-darken-1': '#3700B3',
          secondary: '#03DAC5',
          'secondary-darken-1': '#03DAC5',
          error: '#CF6679',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        },
      },
      darkBlue: {
        dark: true,
        variables: {}, // ✅ this property is required to avoid Vuetify crash

        colors: {
          //green: '#00ff00' // cannot use primary color names here, so use a custom color name (such as 'greenish')
          greenish: '#03DAC5',

          // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
          background: '#111928',
          surface: '#212121',
          primary: '#00ff00',
          'primary-darken-1': '#3700B3',
          secondary: '#03DAC5',
          'secondary-darken-1': '#03DAC5',
          error: '#CF6679',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FB8C00'
        },
      }
    }
  }
})

Then in my v-toolbar file create what the official vue documentation says https://vuetifyjs.com/en/features/theme/

this my componente navbar in file: src/components

<template>
  <v-app>
    <v-btn @click="toggleTheme">toggle theme</v-btn>
    ...
  </v-app>
</template>

<script>
import { useTheme } from 'vuetify'

export default {
  setup () {
    const theme = useTheme()

    return {
      theme,
      toggleTheme: () => theme.global.name.value = theme.global.current.value.dark ? 'light' : 'darkBlue'
    }
  }
}
</script>

Hope I helped, because I felt like there wasn't as much information about the implementation.

Answer 2

This is likely a bug in Vuetify (it is alpha version after all). I've reported it in vuetifyjs/vuetify Issue #13822.

Version 3.0.0-alpha.6 requires a theme.variables object property defined to avoid the crash:

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        variables: {}, // ✅ this property is required to avoid Vuetify crash
      }
    }
  }
}

Also be aware of a couple issues with colors:

1. Primary color names in colors seem to be ignored, so you can't use green. Pick something like greenish instead.

2. Setting colors seems to wipe out the unspecified default colors (which is likely undesirable), so they should be included in the custom setting.

myCustomTheme: {
  colors: {
    // green: '#xxx', 1️⃣
    greenish: '#xxx',

    // 2️⃣
    background: '#ccc',
    surface: '#212121',
    primary: '#00ff00',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC5',
    'secondary-darken-1': '#03DAC5',
    error: '#CF6679',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00'
  }
}

demo