Cannot use namespace ‘ThemeDefinition’ as a type in Vuetify

I want to create a custom theme for Vuetify v3.0.0-alpha.10 This is my vuetify.ts plugin file

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/lib/styles/main.sass";
import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/lib/components";
import * as directives from "vuetify/lib/directives";

const defaultLightTheme: ThemeDefinition = {
  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({
  components,
  directives,
  theme: {
    defaultTheme: "defaultLightTheme",
    themes: {
      defaultLightTheme,
    },
  },
});

But I get this error: Cannot use namespace ‘ThemeDefinition’ as a type

I copied the example of Vuetify docs: Vuetify docs

Any idea to solve this problem? Thanks and greets

Answer

had similar problem i ended up doing the following:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          background: '#FFFFFF'
          // more colors
        },
        variables: {} //ADD AN EMPTY OBJECT
     }
   }
  }
})

please, pay attention to the variables field – that is currently a known bug in Vuetify 3