How to use the vuetify/es5/util/colors.grey function in vuetify

import 'shared/styles/main.less';

import Catalog from './views/Catalog.vue';

require('utils/translations');

const router = require('./router');

Vue.use(Vuetify, {
  rtl: window.isRTL,
  theme: {
    primary: colors.blue.base, // @blue-500
    primaryBackground: colors.blue.lighten5,
    greyBackground: colors.grey.lighten3,
    greenSuccess: '#4db6ac',
    topic: colors.grey.base,
    video: '#283593',
    audio: '#f06292',
    document: '#ff3d00',
    exercise: '#4db6ac',
    html5: '#ff8f00',
    slideshow: '#4ece90',
  },
});
Vue.use(VueIntl);
Vue.use(VueRouter);

new Vue({
  el: 'catalog',
  router,
  ...Catalog,
});

import 'vuetify/dist/vuetify.min.css';
import 'shared/styles/main.less';

import Catalog from './views/Catalog.vue';

require('utils/translations');

const router = require('./router');

Vue.use(Vuetify, {
  rtl: window.isRTL,
  theme: {
    primary: colors.blue.base, // @blue-500
    primaryBackground: colors.blue.lighten5,
    greyBackground: colors.grey.lighten3,
    greenSuccess: '#4db6ac',
    topic: colors.grey.base,
    video: '#283593',
    audio: '#f06292',
    document: '#ff3d00',
    exercise: '#4db6ac',
    html5: '#ff8f00',
    slideshow: '#4ece90',
  },
});
Vue.use(VueIntl);
Vue.use(VueRouter);

new Vue({
  el: 'catalog',
  router,

import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';

// You can also specify those components you are going to use for "a la carte" build:
// https://github.com/vuetifyjs/nuxt/blob/master/template/plugins/vuetify.js
// https://github.com/vuetifyjs/a-la-carte/blob/master/template/src/main.js

Vue.use(Vuetify, {
  theme: {
    primary: '#9c27b0', // a color that is not in the material colors palette
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.darken2,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3,
  },
});

})) as Query;
    dark = theme.variant === 'DARK';
  }

  // eslint-disable-next-line require-atomic-updates
  app.vuetify = new Vuetify({
    theme: {
      dark,
      themes: {
        light: {
          primary: colors.deepPurple.base,
          accent: colors.deepPurple.base,
          error: colors.red.base,
        },
        dark: {
          primary: colors.grey.darken3,
          accent: colors.orange.base,
          error: colors.red.base,
        },
      },
    },
  });
}

import Vue from "vue";
import Vuetify from "vuetify/lib";
import colors from "vuetify/es5/util/colors";

Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken2,
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  }
});

** Nuxt.js modules
   */
  modules: [],
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    defaultAssets: false,
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */

],
  /*
  ** axios configuration
  */
  axios: {
    withCredentials: true,
    baseURL: '/',
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    theme: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3
    }
  },
  /*
  ** Build configuration
  */
  build: {

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  iconfont: 'mdi',
  theme: {
    primary: colors.teal,
    secondary: colors.grey.darken3,
    accent: colors.blue.base
  }
});

const el = document.createElement('div')
el.style.display = 'none'
document.body.appendChild(el)

const COLORS = 8

const white = {
  darken1: material.grey.lighten2,
  lighten2: material.grey.lighten3,
  lighten1: material.grey.lighten2,
}

const black = {
  darken1: material.grey.darken2,
  lighten2: material.grey.darken2,
  lighten1: material.grey.darken3,
}

const scale = [
  material.red,
  material.pink,
  material.purple,
  material.deepPurple,
  material.indigo,
  material.blue,
  material.lightBlue,
  material.cyan,
  material.teal,
  material.green,
  material.lightGreen,
  material.lime,

modules: [],
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    icons: {
      iconfont: "md"
    },
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.lighten1,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken4,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */