I'm using the latest version of vuetify with Nuxt 3. I have a vuetify.js plugin:
`// plugins/vuetify.js
import { createVuetify} from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const myCustomLightTheme = {
dark: false,
colors: {
background: '#03DAC6',
surface: '#FFFFFF',
primary: '#6200EE',
'primary-darken-1': '#3700B3',
secondary: '#03DAC6',
'secondary-darken-1': '#018786',
error: '#B00020',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00'
},
};
myCustomLightTheme.tooltip = {
color: 'black',
background: 'yellow',
};
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
// theme: {
// defaultTheme: 'myCustomLightTheme',
// themes: {
// myCustomLightTheme,
// },
// },
theme: {
defaultTheme: 'dark',
themes: {
myCustomLightTheme
}
},
ssr: true,
components,
directives,
});
nuxtApp.vueApp.use(vuetify);
});`
As it seems, myCustomLightTheme gets loaded but still I cannot change the background color of the tooltip. How to proceed ?
I've already pasted the relevant code. I was expecting to be able to change the background color of the tooltip.
Tooltip uses the CSS variables --v-theme-surface-variant
for background color and --v-theme-on-surface-variant
for text color. Just add those to your color declarations:
const myCustomLightTheme = {
dark: false,
colors: {
'surface-variant': '#ffff00',
'on-surface-variant': '#ffffff',
....
},
};
Note that the background color is set with opacity of 0.7. This cannot be changed programmatically. If you want a different opacity, you have to override the CSS:
.v-tooltip.v-overlay > .v-overlay__content {
background: rgba(var(--v-theme-surface-variant),1);
}