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

admin

我正在使用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选项卡组件中的字体/图标颜色吗？

转载请注明出处:http://www.033230.com/article/20230401/1246337.html