CODEWITHSUNDEEP
javascriptvue.jsvariables
ha-poom
ha-poom

Reputation: 27

JavaScript.. Use values of local variables in other functions

I've been searching for days to solve this problem...

enter image description here

enter image description here

As shown in the image above, I need to apply the data values from other places to the Vuetify Primary I've been googling over and over again, but I can't find the answer... Can you tell me the answer?

This is the JavaScript in question

const primaryColor = variablecolor

export function setColor(variablecolor) {
  console.log('colorCheck',variablecolor)
}

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: primaryColor,
          secondary: '#5CBBF6',
        },
      },
    },
  },
})

These are the methods that are sent to the JavaScript in question

  methods: {
      updateColor() {
        setColor(this.btn_color)
      },
    }

Upvotes: 0

Views: 40

Answers (1)

yoduh
yoduh

Reputation: 14649

You can't dynamically update the initial theme object used by createVuetify but you can instead have your updateColor() method directly modify $vuetify.theme where the theme colors are made accessible as noted in the documentation

values will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.

// Light theme

this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme

this.$vuetify.theme.themes.dark.primary = '#4caf50'

In your case, the method would look something like this:

updateColor() {
  this.$vuetify.theme.themes.light.primary = this.btn_color
}

Upvotes: 1

Related Questions