Nuxt | Vuetify themes - how to change color?

user_9515574 0
Viewed 1314

How can i change the global color attribute in Vuetify dark theme?

Like e.g.

html, body {
  color: red
}

I try to set it via variables.scss but i cant find the appropriate variable name.

Is there a variable for this or how am i supposed to change the color?

nuxt.js vuetify.js
1 Answers

There are a few ways. If you'd like to use variables.scss you need to enable treeshaking in nuxt.config.js

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true, // add this line
  },

Otherwise if you'd like to define your own colour you'd do it in the same configuration object as well. Then you can then use anywhere in your vue template.

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      themes: {
        light: {
          myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

Or in layouts/default.vue insert a style tag and put in your custom css

<style>
  html, body {
    color: red;
  }
</style>
user_61761980
Related