为 Vuetify/Nuxt 选项卡组件自定义 CSS 变量

Question

我正在使用 Vuetify/Nuxt 构建一个网站，并在我的 nuxt.config.js 文件中自定义主题，如下所示：

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      options: {
        customProperties: true
      },
      dark: true,
      themes: {
        dark: {
          background: '#291c07',
          primary: '#7d521a',
          accent: '#6b3d01',
          secondary: '#3b280b',
          grey: "#fff",
          neutralgray: "#fff",
        }
      }
    }
  },

然后，在我的variables.scss 文件中，我有这个：

$heading-font-family: 'Permanent Marker';
$body-font-family: 'Neucha';
$font-size-root: 24px;
@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important
));

除了Tabs component 的字体颜色外，一切都按预期工作。它默认为灰度值，我无法确定需要覆盖哪些颜色变量才能更改此默认颜色。有谁知道哪个变量控制 Vuetify 选项卡组件中的字体/图标颜色？

Answer 1

您能否使用浏览器开发工具在Elements 选项卡中检查灰色。你会看到使用的变量是什么。

我试了一下，看来你需要覆盖这个选择器

.theme--light.v-tabs>.v-tabs-bar

您可能需要在$material--light 上使用它？不确定您当前的配置。