Adjust the appearance of elements depending on whether the user has activated dark mode or

What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize props in components and dynamically change classNames using 'v-if' based on the theme. For example, set the class to 'className__light' when the theme is light and 'className__dark' otherwise. Which approach would be more optimal in terms of performance and implementation time?

javascriptcssvue.jsthemes

Answer №1

Instead of using classes, I prefer to create CSS variables using SCSS or by defining them in the :root element.

If you choose to use the :root method, it would look something like this:

:root {
   --background: red;
}

You can then access this variable in any component like so:

.class {
   background: var(--background); // the background will be red
}

Changing the background color is now as simple as modifying one CSS variable.

To update the variable with JavaScript, you can do the following:

 root.style.setProperty('--background', "green");

The only downside is that this approach is not supported in Internet Explorer. To account for this, you can implement a fallback solution:

.class {
   background: red; //fallback
   background: var(--background); // the background will be red
}

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

Accessing data attributes using jQuery and the class selector

I'm looking for a way to trigger an onClick event for an entire class of elements and access their individual data attributes within the function. Typically, I would use the following method: $(".classy").click(function(){ console.log("Replace th ...

javascriptjquerydomonclickclick

Delete the value from the array and refresh the HTML with the updated total amount, or display '$' if there is no total amount

Currently, I have two inputs: debit and credit. On button click events, they update an array called 'debits'. Debit adds positive values while credit adds negative values. The next step is to sum the values in the array and assign it to a variab ...

javascriptjqueryhtmlarrays

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

javascripthtmlxsltinnerhtmlxsl-variable

Scrolling Horizontally with a <div> containing <a> and <img> elements

I currently have a table with three columns. The third column consists of multiple images that are clickable to perform an action, so I need this column to be horizontally scrollable. To achieve this, I inserted a <div> in the third column and added ...

htmlcssasp.net-mvcbootstrap-4

Creating a default option in a Select tag with React when iterating over elements using the map method

After learning that each element in the dropdown must be given by the Option tag when using Select, I created an array of values for the dropdown: a = ['hai','hello','what'] To optimize my code, I wrote it in the following ...

javascriptreactjstypescript

Php file not receiving data from ajax post method

forget.php PHP: if (! (empty($_POST['emailforget'])) ) { echo "here in the function"; } else { echo "here"; } AJAX: $("#passreset").on('click', function(e) { var emailforget = $("#tempemail").val(); alert(emailforget); ...

javascriptjqueryajax

Strategies for avoiding a hover component from causing distortion to its parent component in React

I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet: Styling for Lang ...

javascriptcssreactjscomponents

Steps to create a zigzagging line connecting two elements

Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...

javascripthtmlcsscss-transitionscss3pie

Generate numerous div elements by utilizing ng-repeat

I am trying to generate 'n' red blocks with text (where n represents the number of elements in an array), but unfortunately, I am seeing a blank page. <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angu ...

javascripthtmlangularjsangularjs-ng-repeat

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

pythonhtmlcssdjango

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

There seems to be a misunderstanding or error on my part regarding POST and GET requests based on what I've read online. On myNumber.ejs, I have a submit form. Upon submission, the view switches to Add.ejs. The goal is for Add.ejs to display both the ...

javascripthtmlnode.jsexpress

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

javascriptreactjstypescriptnext.jsnestjs

When using async functions in iterative processes

In my current setup, I am utilizing a for-each loop to handle a list and specifically require element n to be processed only after element n-1 has completed: let elements = ["item1", "item2", "item3"]; elements.forEach(function(element){ someAsyncFun ...

javascriptnode.js

PHP query will execute even in the absence of clicking the button

I'm encountering an unusual issue. I've defined a query to insert two names into the database, and I've used Javascript(Jquery) to ensure it only runs when the create button is clicked. However, the script seems to be executing every time I ...

javascriptphpjquerymysqldatabase

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

htmlcss

Display tables side by side using Material-UI

Presently, I am utilizing NextJs and MaterialUI to display a table with data fetched from an API created in Strapi. Challenge The current issue lies in using a table component with props that are imported into a page, where the props are mapped to an API ...

javascriptreactjsnext.jsapollostrapi

Modifying variable assignments in an Angular index.html file according to the environment

Is it possible to dynamically set the config.apiKey value in Angular based on different environments such as Development and Production? In a Production environment, use config.appKey = 'AB-AAB-AAB-MPR'; In a Development environment, use config ...

javascriptangularangular6

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...

htmlcssstylus

Using a series of nested axios requests to retrieve and return data

Currently, I am utilizing Vue and executing multiple calls using axios. However, I find the structure of my code to be messy and am seeking alternative approaches. While my current implementation functions as intended, I believe there might be a more effic ...

javascriptvue.jsaxios