Step-by-step guide to customizing the theme in Nuxt using Vuetify

I am new to using Nuxt and Vue, and I am attempting to switch the color theme from dark to light. The project was created using Nuxt CLI, and these are the versions I am using:

"dependencies": {
"core-js": "^3.8.3",
"nuxt": "^2.14.12",
"vuetify": "^2.4.4"
}
"devDependencies": {
   "@nuxtjs/vuetify": "^1.11.3"
}

I am following this guide to learn how to change the theme: https://vuetifyjs.com/en/features/theme/

However, when I attempt to modify the colors or theme, nothing seems to be happening. I have tried passing the light or dark props, but it still doesn't work.

<v-app dark>...</v-app>

plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#00bcd4",
        secondary: "#8bc34a",
        accent: "#3f51b5",
        error: "#e91e63",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
    }
  }
});

Answer №1

By utilizing the CLI, I successfully created a Nuxt project. The live version of the project can be accessed at: https://codesandbox.io/s/vuetify-dark-light-theme-iv8s4?file=/pages/index.vue

It is necessary to implement changes in the vuetify.options.js file as outlined in the official documentation.

To switch between themes, you can modify this.$vuetify.theme.dark accordingly. I have included buttons for this purpose based on information found at: https://github.com/nuxt-community/vuetify-module/issues/213#issuecomment-551972535

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

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...

How to direct all wildcard paths to a particular route in Next.js

I currently have a single landing page application built with nextJs. I am wondering if it is possible to redirect all paths to specific routes, similar to how we do it in react-router. How can I achieve the same functionality in nextJs? <BrowserRou ...

Angularjs regex filter: applying regular expressions to filter data

I've created a regex pattern to match URLs like this: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ Now, I need to incorporate this regex into a filter that will specifically extra ...

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

I'm looking to implement a shortcut using Ctrl+LeftMouseClick in my React project. It functions perfectly on Chrome on my Mac, but in Firefox the shortcut initiates a right mouse click (event.button = 2). I believe this may be due to MacOS's Rig ...

Issue of flickering/flashing in Next js when using conditional rendering

I've been attempting to implement localstorage for storing authentication with Next.js. I am using conditional rendering to ensure that localstorage is accessible before displaying the content. However, I am facing an issue where the page flickers or ...

Having trouble getting my JS/CSS code to work for a single image music play/pause button. Any suggestions on how to fix it?

I'm currently working on a project and trying to incorporate a music button into the navigation bar. The goal is for the song to play when clicked, and then pause when clicked again. However, I've encountered some issues with getting it to functi ...

The error with Bootstrap4 alpha6 modal is in the process of transitioning

Currently, I am facing an issue with the bootstrap4 alpha 6 modal. The error message I am receiving is: Error: Modal is transitioning This occurs when attempting to re-trigger the same modal with dynamic data using a JavaScript function like this: funct ...

"Triggering an AJAX POST request with a click event, unexpectedly receiving a GET response for

Hello there! I am currently attempting to send an AJAX POST request when a button is clicked. Below is the form and button that I am referring to: <form class="form-horizontal" > <fieldset> <!-- Form Name --> <legend> ...

Changing the story in javascript

I am trying to customize the legend to display the following values: 80+ (or 80%+) 75-80 70-75 65-70 60-65 55-50 <50% While I have organized the list in descending order, I seem to be facing an issue with getting the less than symbol to function corr ...

The Microsoft.Azure.WebJobs.Script encountered an issue while attempting to cast an object of type 'System.String' to type 'Microsoft.AspNetCore.Http.HttpRequest' during the return process

I recently encountered an issue with my Azure Function written in JS that is triggered by the Service Bus and generates files to Blob Storage. When attempting to return an HTTP result, I received the following error message: System.Private.CoreLib: Except ...

Tips for retrieving a parameter from the oncomplete attribute of an a4j:jsFunction tag

Is it possible to access a parameter for an <a4j:jsFunction> in the oncomplete="" attribute without using the action="" attribute and assingTo="" of <a4j:param>? <a4j:jsFunction name="refreshTableFilter" render="table,scroller" execute="@fo ...

What is the process for modifying a Gist on GitHub?

Trying to update my Gist from another website using my gist token has been unsuccessful. Retrieving a gist with GET was successful, but updating it with PATCH is not working. I don't believe authentication is the issue since retrieving the gist displ ...

Unlock the parent of an unnamed iframe

Here's a scenario: <div id="parent"> <iframe....></iframe> </div> If I had the above structure, I could use window.parent.document.getElementById('parent').innerHTML to access it. However, my current situation is di ...

Determining whether a mouse click occurred in the left or right side of a DIV element

Is there a way to determine whether a mouse click occurred on the left or right side of a div element? I'm curious about calculating this: $("div").click(function(e){ // code to calculate left or right half }); <div>Content that can change&l ...

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

Algorithm to identify the highest sum of two numbers in a disorganized array of whole numbers

I am looking to create a function that can identify the largest pair sum in an unordered sequence of numbers. largestPairSum([10, 14, 2, 23, 19]) --> 42 (sum of 23 and 19) largestPairSum([99, 2, 2, 23, 19]) --> 122 (sum of 99 and 23) largestPairSum ...

HTML Scripts: Enhancing Web Functionality

I have another question regarding executing a script (docs()) upon clicking on text. I attempted to use the following code: <p><span class="skill">Documentation can be found here.<script>docs()</script></span></p> Unfo ...

Invoking a PHP function within a JavaScript file

I'm facing an issue with calling a PHP function from JavaScript. I have written a code snippet where the PHP function should print the arguments it receives, but for some reason, I am not getting any output when running this code on Google Chrome. Can ...

Storing duplicate code in multiple cache files using ReactJS ServiceWorker

I am currently working on integrating a serviceworker into an existing React application that has the following filesystem layout: Filesystem The initialization code is stored in the public folder, while the main code resides in the src folder. In my serv ...

The array.slice() method fails to work properly when I try to start it from any index other than 0

I am currently working with an array called $scope.results which contains 8 objects. I have also created a custom simple pagination and a function called selectAll() that I'm trying to get to work together. Please refrain from suggesting the use of b ...