Customize CSS Variable for Vuetify/Nuxt Tabs Component

Question

I'm building a site with Vuetify/Nuxt and I'm customizing the theme in my nuxt.config.js file like this:

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",
        }
      }
    }
  },

Then, in my variables.scss file, I have this:

$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
));

Everything is working as expected except for the font color of a Tabs component. It defaults to a grey value and I cannot figure out which of the color variables needs to be overwritten to change this default color. Does anyone know which variable controls the font/icons color in a Vuetify tabs component?

kissu · Accepted Answer · 2021-07-07 12:39:57Z

0

Can you inspect the gray color with your browser devtools, in the Elements tab. You'll see what is the used variable.

I gave it a try, and it looks like you need to override this selector

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

You maybe need to use it on $material--light? Not sure of your current configuration.

answered Jul 7, 2021 at 12:39

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mthelm85 Over a year ago

It looks like it's the lighten5 variation of the accent color, which I've already redefined. Do you know how to customize the lighten/darken variants?

kissu Over a year ago

Maybe directly, as written here: vuetifyjs.com/en/styles/colors/#material-colors Like red darken-4.

Collectives™ on Stack Overflow

Customize CSS Variable for Vuetify/Nuxt Tabs Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related