How to change background color of v-tooltip ?

[belfortf]

So, I love vuetify so far but I'm having a hard time doing a relatively simple thing which is changing the background color of a v-tooltip.

As I understand, I have to create a new theme to do that and then pass this custom theme to the component. I did:

`// 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': '#18786',
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 correctly (as I have my standard theme set to dark) but still I cannot change the background color of the tooltip. What should I do exactly ?

[YSHgroup]

I've referred the SASS variable for the VTooltip.
There are a variable $tooltip-background-color for the background color of the tooltip, so I've tried with redefining that in theme, but it hadn't work.
In my case, I solved it by overriding the variables in v-overlay__content.

.v-overlay__content {
  --v-theme-surface-variant: 255, 255, 255;
  --v-theme-on-surface-variant: 0, 0, 0;
  border: 1px solid black;
... ....
}

[Kishkun]

/**

• src/styles/settings.scss
• Configures SASS variables and Vuetify overwrites
  */
  @use "color";

@forward 'vuetify/settings' with (
$body-font-family: (Roboto, sans-serif),
$tooltip-background-color: color.$red
);

[saeed-asghari]

To make changes in Vue 3, it should be done as follows.
.v-tooltip> ::v-deep(.v-overlay__content) {
background: red;
color: white
}