In vuetify3, i'm trying to change the background of all my fields (text, textarea, select...). I have custom themes defined like this :

...
const darkTheme: ThemeDefinition = {
  dark: true,
  colors: {
    background: '#111827',
    surface: '#1F2937',
    primary: '#2563EB',
    secondary: '#8B5CF6',
    ...
  },
};

const lightTheme = {
  dark: false,
  colors: {
    ...
  },
};

export default createVuetify({
  theme: {
    defaultTheme: 'darkTheme',
    themes: {
      darkTheme,
      lightTheme,
    },
    variations: {
      colors: ['background', 'surface'],
      lighten: 5,
      darken: 4,
    },
  },
});

I've tried to add a variables section to my themes but none of the variables i tried worked :

const darkTheme: ThemeDefinition = {
  ...
  variables: {
    // none of the following worked...
    '--v-field-background-color': '#ff0000'
    '--v-input-control-background-color': ...
    '--v-input-control-background-color': ...
    'input-background': ...
    'input-solo-background': ...
    'input-filled-background': ...
    'input-outlined-background': ...
  }
};

Is it the good direction ? Is the variables section the good way to do this ? Maybe i haven't found the good variables, and if so where to find the list ? (i can't find it in the vuetify documentation)

I was wondering if the fact that i added color variations could be the reason that this doesn't work...

In vuetify3, i'm trying to change the background of all my fields (text, textarea, select...). I have custom themes defined like this :

...
const darkTheme: ThemeDefinition = {
  dark: true,
  colors: {
    background: '#111827',
    surface: '#1F2937',
    primary: '#2563EB',
    secondary: '#8B5CF6',
    ...
  },
};

const lightTheme = {
  dark: false,
  colors: {
    ...
  },
};

export default createVuetify({
  theme: {
    defaultTheme: 'darkTheme',
    themes: {
      darkTheme,
      lightTheme,
    },
    variations: {
      colors: ['background', 'surface'],
      lighten: 5,
      darken: 4,
    },
  },
});

I've tried to add a variables section to my themes but none of the variables i tried worked :

const darkTheme: ThemeDefinition = {
  ...
  variables: {
    // none of the following worked...
    '--v-field-background-color': '#ff0000'
    '--v-input-control-background-color': ...
    '--v-input-control-background-color': ...
    'input-background': ...
    'input-solo-background': ...
    'input-filled-background': ...
    'input-outlined-background': ...
  }
};

Is it the good direction ? Is the variables section the good way to do this ? Maybe i haven't found the good variables, and if so where to find the list ? (i can't find it in the vuetify documentation)

I was wondering if the fact that i added color variations could be the reason that this doesn't work...

• css
• vuejs3
• vuetifyjs3

1 Answer 1

Inputs have a bg-color prop, I am not sure if they use CSS variables at all.

But all inputs extend VField, so you can set a background color on all inputs by specifying a default value for bg-prop on VField using the defaults section in the Vuetify configuration (see docs):

export const vuetify = createVuetify({
  defaults: {
    VField: {
      bgColor: 'primary',
    },
  },
})

The color value can be a variable from the theme, like primary or a self-defined variable, so you can change background color with the active theme.

Here it is in a playground.