How to customize default colors in Vuetify?

Question

Maybe my problem is simple, but I couldn't find any solution until now. I'm using Vuetify in my Nuxt application. I used its dark theme. According to the theme configuration of the official website, we can change the primary, secondary or other colors of the theme with the color we want. However, when we set to a dark theme, the default text and background colors were set to white and black. I can't find any solution to change them. I know that we can set for example class="primary" for an element to change its background color. But I want to set a default color for text or background like this:

body {
    color: var(--v-info-base);
}
/* or */
#app {
    color: var(--v-info-base);
}

The colors of my website are defined in my nuxt.config.js file, like this:

vuetify: {
        customVariables: ['~/assets/variables.scss'],
        theme: {
            dark: true,
            options: { customProperties: true },
            themes: {
                dark: {
                    primary: {
                        base: "#099b63",
                        darken1: "#04c279"
                    },
                    accent: "#250032",
                    secondary: "#97812F",
                    info: {
                        base: "#1FFFF1",
                        darken1: "#450b5a",
                        darken2: "#1125c0",
                        darken3: "#40bfa4"
                    },
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3,
                    anchor: "#1FFFF1"
                }
            },
        }
    },

But that doesn’t work for me! ! !

Answer 1

To achieve this, you need to override vuetify's sass variables, There are usage examples in the documentation

For example, in your variables.scss, you could use the following code:

$material-dark: (
  'background': #464994,
  'text': (
     'theme': #944646,
   )
);

This will override the default background and text colors in dark mode.