How can we have multiple them in vuetiy?

Question

Vuetify has light and dark mode And you can easily switch between them . I want to add third one "blue mode" . Is it possible ? And how ??

Answer 1

No, this is NOT natively supported by Vuetify v2.

But you can always use some tricks to achieve your goals.

Source and workarounds: https://github.com/vuetifyjs/vuetify/issues/10985

Answer 2

Yes it's possible! Using a component framework doesn't stop you creating additional styles.

In Vuetify, you'll probably want to use SCSS variables in order to generate new theme styles. I suggest you to go through all vuetify styles directory and check how it's done for dark and white themes. It's not rocket science but you'll have to dig into vuetify styles directory yourself for sure and find all mixins you want to use, and copy their usages inside your own scss files using your new theme.

Most important parts are:

• From Vuetify/src/styles/settings you can copy one of the theme files (_light.scss or _dark.scss) and update the new file with your own style settings.
• There is a mixin in vuetify you can use to generate your new styles, check how vuetify does it (Vuetify/src/styles/tools/_theme.sass). You'll have to find all usages of this mixin and copy them into your own scss styles using your new theme.
• Also there is 1 more usage of theme variables ($material-dark and $material-light) inside vuetify/src/styles/elements/_headings.sass file. Each theme generates headings styles using heading mixin.

Answer 3

Vuetify Theme Configuration

Add custom theme

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
      dark: {
        // dark theme
      },
      customTheme: {
        // custom theme
      }
    },
  },
})