如何更改 Vuetify 3 的工具提示背景？

Question

我正在使用最新版本的 vuetify 和 Nuxt 3。我有一个 vuetify.js 插件：

`// 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);
});`

看起来，myCustomLightTheme 已加载，但我仍然无法更改工具提示的背景颜色。如何进行？

我已经粘贴了相关代码。我期望能够更改工具提示的背景颜色。

Answer 1

工具提示使用 CSS 变量

--v-theme-surface-variant

作为背景颜色，使用

--v-theme-on-surface-variant

作为文本颜色。只需将它们添加到您的颜色声明中即可：

const myCustomLightTheme = {
  dark: false,
  colors: {
    'surface-variant': 'yellow',
    'on-surface-variant': 'black',
    ....
  },
};

注意背景颜色设置为不透明度0.7。这不能以编程方式更改。如果你想要不同的不透明度，你必须覆盖CSS：

.v-tooltip.v-overlay > .v-overlay__content {
    background: ...
  }