Vuetify3 How to define theme settings

user_6712924 0
Viewed 1031

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!

vuejs3 vuetify.js vue.js
1 Answers

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

user_62771510
Related