Overwrite Vuetify default grey dark theme

Question

I'm using nuxt.js and have installed Vuetify and have added a dark theme to one of my layout pages. So I have two layout pages (Light and Dark). I have mounted this to my layout to switch out the theme, so I can either use a dark theme page or a light one.

        mounted(){
            setTimeout(() => this.$vuetify.theme.dark = false, 0);
        }

When the theme switches to dark it goes a grey colour by default. I want to change this grey colour to a dark blue colour. How can I change the variables to change the base black-gray colour to a base dark blue color?

I don't want to create a "Dark theme" in the nuxt.config.js file. This is not what I want to do because I then have to add, color="primary" to my dark theme everywhere.

I want to do is set my base colour to dark-blue instead of black-grey and then all colours in my theme will change. How can I do this?

thopaw thopaw · Accepted Answer · 2020-07-21T06:30:04

Have you checked the docs for information about customizing the theme color palette.

The docs say that you can define this way the color definitions with colors of your choice.

This is an example plugin of the docs:

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

import colors from 'vuetify/lib/util/colors'

const vuetify = new Vuetify({
  theme: {
    themes: {
      dark: {
        primary: colors.blue.lighten3,
      },
    },
  },
})

Overwrite Vuetify default grey dark theme

1 Answers