Unlock the potential of JavaScript by accessing the local variable values in different functions

I've been struggling for days to find a solution to this issue...

https://i.stack.imgur.com/KDN7T.jpg

https://i.stack.imgur.com/tOfCl.jpg

The image above illustrates the challenge I'm facing - trying to apply data values from elsewhere to the Vuetify Primary. Despite my incessant googling, I have yet to come across the answer... Can you provide some insight?

Here is the relevant JavaScript code:

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 interact with the aforementioned JavaScript:

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

Answer №1

To update the initial theme object used by createVuetify, you cannot do it dynamically. However, you can achieve this by having your updateColor() method directly modify $vuetify.theme. This allows you to access the theme colors as specified in the documentation

The values will be accessible on the instance $vuetify object under the theme property. This enables you to dynamically adjust your theme. Vuetify will automatically regenerate and update your theme classes in the background, seamlessly refreshing your application.

// Light theme

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

// Dark theme

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

In your scenario, the method would resemble this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

Delete elements with identical values from array "a" and then delete the element at the same index in array "b" as the one removed from array "a"

Currently, I am facing an issue while plotting a temperature chart as I have two arrays: a, which consists of registered temperature values throughout the day. For example: a=[22.1, 23.4, 21.7,...]; and b, containing the corresponding timestamps for eac ...

Using JQuery to create interactive dropdown menus with dynamic options

I am exploring the possibility of dynamically updating the choices available in an HTML dropdown menu based on the selection made by a user - consider this sample JSON data: series: [ {name: 'Company X', product: 'X1'}, {name: 'Co ...

Tips for incorporating jQuery UI into Angular 6

No matter how many methods I have tried from StackOverflow, I cannot seem to get jquery-ui to work in my angular 6 component. Here's what I've attempted: I went ahead and ran npm install jquery jquery-ui to install both jquery and jquery-ui. ...

Submit a post request using a Trigger.io-powered mobile application

Essentially, I need my mobile app (created with Trigger) to send a Post request to a remote server. The app generates GPS coordinates and timestamps, then sends this data to a server (built using Ruby on Rails) for storage. I am utilizing the Zepto library ...

Why is my Ajax utilizing PHP _POST not functioning as expected?

I am facing an issue with the JavaScript code below: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> <script> function deletUserInfo(id_user){ console.log(id_user); ...

Exploring the Power of JQuery and Iterating with For-

I'm currently facing a small issue with my code. I need to retrieve information about each module when I display the hidden table row. The information is fetched from the page {modules/$moduleid}. While I understand how to utilize AJAX, my challenge l ...

What is the most effective method for manipulating and slicing a string based on character matching?

In this particular scenario, we are dealing with strings that follow this pattern: CP1_ctl05_RCBPAThursdayStartTimePicker_0_dateInput CP1_ctl05_RCBPAFridayStartTimePicker_3_dateInput CP1_ctl05_RCBPAMondayStartTimePicker_1_dateInput The goal is to extract ...

Struggling to retrieve information from a JSON file and display it within a component?

After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent f ...

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

Navigating JSON data with unexpected fields in Typescript and React.js

Looking to parse a JSON string with random fields in Typescript, without prior knowledge of the field types. I want to convert the JSON string into an object with default field types, such as strings. The current parsing method is: let values = JSON.parse ...

Guide on setting a property for req.session

I'm a beginner in node.js and sessions, and I am having trouble setting properties to the session! I am trying to add a property to the session and save it in the database, but I keep getting errors. Here are my codes: app.js (main js file) const s ...

The integration of signalR with jquery mobile is posing several challenges

Recently, I started working with jquery mobile and signalR to implement a calling feature in my mobile app. However, I encountered an error that looks like this: http://localhost:2286/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%2 ...

Tips on keeping Bootstrap Modals out of your browsing history

Imagine this scenario A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below) <a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me ...

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code: $('#PlatformErrorsTableData').html(table1Html); $('#PlatformErrorsTableData div:nth-child(even)').css(" ...

tips for accessing dynamic key pair value data in Angular

I am facing an issue where I cannot retrieve the dynamic key pair value from the dynamic JSON. Below is my JSON: var d = { "pexels-photo.jpeg": { "information": "laptop", "desc": { "mimetype": "image/jpeg", "id" ...

Having trouble with the `npm start` command while working with react.js?

Currently, I am in the process of setting up React.js. To achieve this, I executed npm install -g create-react-app followed by create-react-app my-app. Afterward, I proceeded to run the npm start command but encountered the error displayed below. https:// ...

What is a method for saving a file from Chrome to a network drive using scripting language, even though it's currently functioning in IE?

In a SharePoint 2013 document library, I have implemented a JavaScript function that captures user access to files. The function creates a .txt file containing information about the user ID, username, and file path, which is then saved to a network drive l ...