How to change default colors in Vuetify?

Question

Maybe my question was simple but I could not find any solution to that until now. I am using Vuetify in my Nuxt app. I used the dark theme of that. according to Theme configuration of the official website we can change primary or secondary or other colors of the theme with our desired colors. But when we set for example dark theme the default text and background colors are set to white and black. I could not find any solution to change them. I know that we can set for example class="primary" to 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);
}

Where the colors of my website was 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 does not work for me!!!

hamid niakan hamid niakan · Accepted Answer · 2021-09-06T17:57:28

to achieve this you have to rewrite vuetify's sass variables, example on how to use in the Doc

so for example in your variables.scss you can have the following code:

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

this will rewrite the default colors for the background and text color in the dark mode.

How to change default colors in Vuetify?

1 Answers