Change all vuetify component text and background colors

Guys do you know how can i change all Vuetify component text and background colors?

i used custom theme but is not fixed.

🙂

const myCustomLightTheme = {
    dark: false,
    colors: {
        background: "#FFFFFF",
        surface: "#FF0000",
        primary: "#FF0000",
        "primary-darken-1": "#FF0000",
        secondary: "#03DAC6",
        "secondary-darken-1": "#018786",
        error: "#B00020",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FB8C00"
    }
};

const vuetify = createVuetify({
    components,
    directives,
    theme: {
        defaultTheme: "myCustomLightTheme",
        themes: {
            myCustomLightTheme
        }
    }
});

>Solution :

You are missing the entry for on-background (and probably on-primary, on-surface, etc):

const myCustomLightTheme = {
  dark: false,
  colors: {
    ...,
    'on-background': '#00f00f',
    'on-primary': '#ff0',
  },
}

Use the inspector to figure out which variable is used. In the screenshot, you can see that text color on the input is set through the --v-theme-on-background variable:

(v-theme- is a prefix added by Vuetify, the corresponding variable is on-background)

Here it is in a playground