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

const apolloClient = app.apolloProvider!.defaultClient;
    const { theme } = (await apolloClient.cache.readQuery({
      query: THEME,
    })) 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 i18n from '@/i18n'

Vue.use(Vuetify)
Vue.use(TreeView)
Vue.use(VueTour)

Vue.config.productionTip = false

Vue.use(Vuetify, {
  lang: {
    locales: { en, zhHans, de },
    current: 'zhHans'
  },
  theme: {
    primary: colors.indigo.darken1,
    secondary: colors.red.lighten4,
    accent: colors.indigo.base
  }
})

/* eslint-disable no-new */
new Vue({
  i18n,
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

severityColor(prop, severity) {
      const colorTable = [
        {
          severity: 'disaster',
          fill: colors.red.lighten1, // bright red
          text: colors.grey.lighten5
        },
        {
          severity: 'high',
          fill: colors.red.darken4, // red
          text: colors.grey.lighten5
        },
        {
          severity: 'average',
          fill: colors.orange.lighten1, // orange
          text: colors.grey.darken4
        },
        {
          severity: 'warning',
          fill: colors.yellow.accent3, // bright yellow
          text: colors.grey.darken4
        },
        {
          severity: 'information',
          fill: colors.lightGreen.darken1, // bright green
          text: colors.grey.lighten5

VDatePicker,
        VProgressCircular,
        VSubheader,
        VTooltip,
        VDivider,
        VCard,
        VDialog,
    },
    directives,
    iconfont: 'mdi',
    // https://vuetifyjs.com/en/theme-generator
    theme: {
        primary: colors.blue.darken1,
        secondary: colors.blue.lighten3,
        accent: colors.amber.darken4,
        error: colors.red.base,
        warning: colors.yellow.darken3,
        info: colors.blue.base,
        success: colors.green.base
    }
})

import VueResource from "vue-resource";
Vue.use(VueResource);

import Notifications from "vue-notification";
Vue.use(Notifications);

import ErrHandlers from "./lib/errors";
Vue.use(ErrHandlers);

import { FluxUtils } from "./lib/fluxUtils";

function addAlpha (hex, alpha) {
  return 'rgba(' + (
    hex
      .substring(1)
      .match(hex.length === 7 ? /[^#]{2}/g : /[^#]/g)
      .map(v => parseInt(v, 12))
      .join(', ')
  ) + `, ${alpha})`
}

const vuetify = {
  primary: colors.teal.base,
  secondary: colors.teal.lighten1,
  accent: colors.amber.darken1,
  error: colors.red.base,
  warning: colors.orange.base,
  info: colors.blue.base,
  success: colors.green.base
}
export { vuetify }

const items = {
  controller: colors.purple.base,
  dummy: colors.grey.darken4,
  edge: colors.cyan.base,
  host: colors.orange.base,
  port: colors.green.base,
  switch: colors.indigo.base
}
export { items }

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,
  material.yellow,
  material.amber,
  material.orange,
  material.deepOrange,
  white,

data () {
      return {
        active: 'primary',
        backupTheme: {},
        color: '',
        components: Components,
        current: 1,
        dark: false,
        dialog: false,
        drawer: false,
        useNames: false,
        theme: {
          primary: colors.red.base,
          secondary: colors.red.lighten2,
          accent: colors.purple.base,
          error: colors.red.base,
          warning: colors.yellow.base,
          info: colors.blue.base,
          success: colors.green.base
        },
        to: null,
        total: Components.length
      }
    },

data () {
      return {
        active: 'primary',
        backupTheme: {},
        color: '',
        components,
        current: 1,
        dark: false,
        dialog: false,
        drawer: false,
        useNames: false,
        theme: {
          primary: colors.red.base,
          secondary: colors.red.lighten2,
          accent: colors.purple.base,
          error: colors.red.base,
          warning: colors.yellow.base,
          info: colors.blue.base,
          success: colors.green.base
        },
        to: null,
        total: components.length
      }
    },

data () {
      return {
        active: 'primary',
        backupTheme: {},
        color: '',
        components: Components,
        current: 1,
        dark: false,
        dialog: false,
        drawer: false,
        useNames: false,
        theme: {
          primary: colors.red.base,
          secondary: colors.red.lighten2,
          accent: colors.purple.base,
          error: colors.red.base,
          warning: colors.yellow.base,
          info: colors.blue.base,
          success: colors.green.base
        },
        to: null,
        total: Components.length
      }
    },

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
  iconfont: 'mdi',
  theme: {
    primary: "#f05a22",
    secondary: colors.grey.darken3,
    accent: colors.deepOrange.lighten4,
    error: colors.red.lighten2,
    info: colors.blue.lighten3,
    success: colors.green.lighten1,
    warning: colors.amber.lighten1
  },
})