Issue with Vuetifyjs theme variable failing to function properly in version 1.0.0

Check out the step-by-step instructions provided in 

https://vuetifyjs.com/en/style/theme
. I successfully changed the theme using the code below with vuetifyjs version 0.13.0.

However, after updating to vuetifyjs 1.0.5, the font still displays correctly but all the colors are no longer working post the update.

I presume this issue might be linked to the changes made in 

//node_modules/vuetify/src/stylus/main.styl
and 
//node_modules/vuetify/src/stylus/theme.styl
as the variable $theme was defined in v0.13.0 but not in v1.0.0?

Any clues or explanations would be much appreciated. Thank you.

# File: //src/stylus/main.styl

/** Stylus Styles */
@import '../../node_modules/vuetify/src/stylus/settings/_colors'

$theme := {
  primary: $deep-purple.darken-1
  accent: $deep-purple.accent-2
  secondary: $deep-orange.darken-1
  info: $blue.darken-2
  warning: $amber.darken-2
  error: $red.darken-2
  success: $green.darken-2
}

$body-font-family := 'Share Tech Mono'

@import '../../node_modules/vuetify/src/stylus/main'

Update:

Following the suggestion by Traxo, the modification in //src/main.js using the code below resolved the issue.

# Vue.use(Vuetify)

Vue.use(Vuetify, {
  theme: {
    primary: '#5e35b1', // $deep-purple.darken-1
    accent: '#7c4dff', // $deep-purple.accent-2
    secondary: '#f4511e', // $deep-orange.darken-1
    info: '#1976d2', // $blue.darken-2
    warning: '#ffa000', // $amber.darken-2
    error: '#d32f2f', // $red.darken-2
    success: '#388e3c' // $green.darken-2
  }
})
javascriptvue.jsfrontendvuetify.js

Answer №1

Obsolete starting from version 0.17:

Stylus themes are no longer necessary (and won't function).

Now, theme colors are defined within the Vue.use statement instead of stylus, documentation

Beginning from version 0.17, you must include a theme property in the Vue.use function

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

(please note that values like "red" or "green" will not work; you need to use hex values)

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

Postman successfully interacts with cookies, while VueJS encounters difficulties in doing so

Currently, I have a Flask server up and running on , along with a Vue.js frontend running on http://localhost:8080. The API has been set up and tested using Postman, with everything functioning seamlessly as expected. Upon sending a POST request to /log ...

vue.jsflasksessioncookiesaxios

Halt execution of routes using backbone.js

Is it feasible to halt route execution within backbone.js solely using the router? I understand there is a callback function for each route where I could verify if routing is permitted, but I am unsure how to prevent execution based on a property (such as ...

javascriptmodel-view-controller

AngularJS - retrieving and displaying the selected value from an HTML dropdown menu

Could someone help me figure out why the Land selection is empty when trying to display it as {{ selectCenter.land }}? For reference, here is a functional plunker: http://plnkr.co/edit/Q8jhdJltlh14oBBLeHJ9?p=preview And the relevant code snippet: ...

javascriptangularjs

Preventing pop-up windows from appearing when triggered by a mouse click event

I am looking for a solution to trigger a popup window when a user right-clicks on a specific area. Here is the current code I am using: $("#popup").bind('mousedown', function(e) { var w; if(e.which==3) { w=window.open('link& ...

javascriptjquerypopupwindow.openright-click

Alter Text Using Typewriter

Recently, I have been experimenting with code on my glitch website, trying to create typewriter text. Thanks to help from a user on StackOverflow, I was able to achieve this effect successfully. However, I am now facing a new challenge. My goal is to make ...

javascripthtml

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Utilizing Angular Date Time Picker to invoke owl-date-time has been functioning flawlessly. However, one issue I have encountered is that the calendar does not automatically close after selecting a date. Instead, I am required to click outside of the cal ...

javascriptangulartypescript

Is it possible to utilize two different versions of a JavaScript library on a single page without causing function conflicts?

My current project involves using multiple versions of the Nvd3 library for different charts on a single page within an Angular application. Each chart is loaded through its own template and requires a specific version of Nvd3 (e.g., v1.8 for partial_1.htm ...

javascriptangularjsd3.jsnvd3.js

What is the best way to add HTML tags both before and after a specified keyword within a string using JavaScript?

Imagine I have a string similar to this, and my goal is to add html tags before and after a specific keyword within the string. let name = "George William"; let keyword = "geo"; Once the html tags have been appended, the desired result should look like ...

javascriptjquery

Utilizing use-immer and promises to effectively handle an API route mapping system

In the process of tackling the issue of double hook calls in Next.js dev mode, I've encountered a challenge with server API calls that cannot handle duplicates. To address this, I opted for fix #4 outlined in the following article, where I decided to ...

javascriptnext.jsimmer

How to retrieve the value of a SelectField component within a constant using Material-UI

I am currently facing an issue with my Drawer component that contains a SelectField with some fields. I am struggling to get the value and implement the onChange functionality of the Field. Below is the snippet of my code: const DrawerCargoAddItem = (p ...

javascriptreactjsreact-nativematerial-ui

Tips for providing arguments in the command line to execute a yarn script

Just starting out with JavaScript. I understand that npm allows for passing variables in the command line using process.env.npm_config_key like this: npm run --key="My Secret Passphrase" test:integration How can I achieve the same thing with yarn? I&apo ...

javascriptnpmyarnpkg

Struggling to incorporate JSON data and javascript functions into an HTML file

I've been struggling to create a feed from a json link and display it in separate divs within an html document. Despite multiple attempts with different approaches for three different newspaper sources, I have not been successful. I'm hoping som ...

javascripthtmljson

Node js - Looping Through Loading

I am facing an issue with my Node.js application. It runs perfectly fine on my local environment, but when I try to run it on my server using forever, the page just keeps loading without displaying anything. There seems to be no response and it gets stuc ...

javascriptnode.jsexpress

Conceal a div while revealing the other div

I am currently trying to achieve a unique visual effect. I have three divs named div1, div2, and div3. The objective is for div1 to slide up and disappear when clicked, while div2 simultaneously slides up and becomes visible. Similarly, when div2 is click ...

javascriptjqueryhtmlcss

You cannot click on a React subcomponent

I am currently working on implementing a "Title" component within a header. The idea is that when you click on the title component, a header will appear with various buttons for formatting options such as bold and underline. This concept was inspired by a ...

javascriptreactjsmaterial-ui

accurate JSONP reply

Currently, I am experimenting with JSONP locally to receive a correct response and pass it into my callback function jsonp_callback. I am referencing code from: How do I set up JSONP? header('content-type: application/json; charset=utf-8'); $dat ...

javascriptjqueryajaxjsonp

Preserve the chosen List group element with Vue.js

Currently, I am in the process of creating a Quiz application. The issue I am encountering is that when a user selects an answer, the selected list item class becomes active. However, if the user then chooses the answer to another question, the borders on ...

vue.jsbootstrap-4

Is it possible to populate a div using jQuery Datatable?

Seeking help with jQuery datatable as a newbie. How can I populate divs instead of tables with the data from an ajax call? The structure should resemble a table: <div id="wrap"> <div class="drow"> <div class="dco ...

javascriptjqueryajaxjsondatatable

Is there a way to access just the concealed text within an element?

Is there a way to create a JavaScript function that can specifically extract hidden text from an element? Are there any existing libraries with this capability, and if so, how efficient are they? In order for an element to be considered visible ac ...

javascriptcsshtmlseleniumwebdriver

Storing user input as an object key in typescript: A comprehensive guide

When delving into Firestore for the first time, I quickly learned that the recommended modeling approach looks something like this: check out the model here members { id: xyz { name: Jones; ...

javascriptangulartypescriptgoogle-cloud-firestorekey-value