How to add a Gradient in Nuxt config for dark mode in vue-CodePudding

So basically this is the part of my nuxt config.js. I wanted to change into different colors with the switch back and forth. Please help. Basically when I am appending the gradient class its not working as meant to be.

theme: {
  dark: true,
  themes: {
    dark: {
      primary: colors.blue.darken2,
      orange: '#FF000',
      green: '#2DBD09',
      icon_back: '#FF7043',
      gradient: 'linear-gradient(0.25turn, #5fbe73, #67be60, #72c04f)'
      
    },
    light:{
      'container-background': '#e1e1e1',
      green: '#2DD9F',
      icon: '#2DBD9F',
      gradient: 'linear-gradient(0.25turn, #5fbe73, #67be60, #72c04f)'
    },
  },
},

index.vue

<v-card-title >
  <span >Added Cards</span>
  <AddCard />
</v-card-title>

CodePudding user response：

Gradients are not useable as Vuetify theme values, as they can only be used in css background-image. Vuetify theme colors are used across the framework applying to both color and border-color properties, which would not be applicable, so is not implemented.

As an alternative to what you are trying to do, you can simply apply your own css class that contains your gradient, and change it conditionally by referencing this.$vuetify.theme.isDark

CodePudding user response：

Looking at that answer, I don't think that such feature is supported by Vuetify (and will probably never be).

I would probably do that manually with CSS some media query (regarding dark): https://css-tricks.com/dark-modes-with-css/

It's not like there is a lot of work anyway, you're gonna spend more time trying to achieve that with Vuetify.