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
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