Is there a way to have more than 2 (dark and light) themes in Vuetify 2.0?

Question

Vuetify 2.0 gives a relatively easy option to switch between 2 color themes in the app. Yet in the current project there is a need to add a 3rd theme (dark, light and special - 'high contrast' mode).

At first I imagined that something like:

export default new Vuetify({
   theme: {
      themes: {
          light: {...},
          dark: {...},
          highContrast: {...}
      }
   }
})

should be possible. Yet it seems that there is no way to activate the 3rd or more themes in the default Vuetify mode. Anybody has experience with a similar scenario?

Answer 1

You probably know the answer yet, but still someone might search for the hint. Yes, you can define a custom theme in Vuetify, and the example is available in the documentation:

Vuetify docs

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

const myCustomLightTheme = {
  dark: false,
  colors: {
    background: '#FFFFFF',
    surface: '#FFFFFF',
    primary: '#6200EE',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC6',
    'secondary-darken-1': '#018786',
    error: '#B00020',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomLightTheme',
    themes: {
      myCustomLightTheme,
    },
  },
})