What steps can I take to prevent constantly re-fetching a disabled CSS file?

I'm currently in the process of implementing a dark theme on my website, and my current method involves using 2 style sheets:

<link rel="stylesheet" type="text/css" href="/flatly.css">
<link rel="stylesheet" type="text/css" href="/darkly.css">

After that, I add or remove the "disabled" attribute to the darkly css link to enable or disable the dark theme.

While this approach does work, there is a slight lag in rerendering every time I toggle the dark theme due to a new network request being made to download the darkly.css file.

Is there a way to avoid this issue?

htmlcssvue.jsdarkmode

Answer №1

Make sure to review how you are including and excluding the disabled attribute. With pure JS, it should not require a re-fetch.

You can find a helpful reference in this gist that demonstrates this procedure.

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

Is there a fixed header table feature that comes built-in with HTML5?

Is there a native feature in HTML 5 for implementing a fixed header table with a scrollable tbody, while keeping the thead and tfoot fixed? ...

html

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

When using vue-property-decorator, changes in data do not automatically generate an `emit` event

I have created a selection field that showcases a variety of fruits. My goal is to update the parent component with the selected fruits from the SelectAll feature. To achieve this, I implemented a component event called @Emit("fruitsSelected") which should ...

vue.jsvue-property-decorator

Conflicting events arising between the onMouseUp and onClick functions

I have a scrollbar on my page that I want to scroll by 40px when a button is clicked. Additionally, I want the scrolling to be continuous while holding down the same button. To achieve this functionality, I implemented an onClick event for a single 40px s ...

javascripthtmlreactjstypescriptresponsive-design

Switching the keyboard language on the client side of programming languages

I'm interested in altering the keyboard language when an input element changes. Is it possible to modify the keyboard language using client-side programming languages? And specifically, can JavaScript be used to change the keyboard language? ...

javascripthtmlangularjstypescriptecmascript-6

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...

htmlcssbootstrap-4

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering

Tips for integrating semantic HTML with React components

As a newcomer to react, I am eager to establish a strong foundation before delving deep into the language and risking having to backtrack later on. I am curious about how to incorporate semantic HTML in react. Elements such as <header>, <nav>, ...

htmlreactjs

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

Add custom scripts to individual components within a Vue.js application

After extensive searching, I still can't seem to find a solution to my current issue. My focus is on a Vue project with vue-cli, where I need to inject various scripts into different pages (leveraging vue-router). Here are more specific details: Thi ...

javascriptvue.jsvue-cli

Is the user currently accessing the website in multiple tabs?

I am currently working on detecting the online status of users and need to update it when the tab is closed. The challenge I am facing is determining if the user has multiple tabs open so that the status remains the same, only updating when there are no ...

javascriptjqueryvue.jsweb

Stop closing the bootstrap modal popup when the space key is pressed

Is there a way to prevent the model popup from closing when the space or enter key is pressed on the keyboard? I have already tried using data-backdrop="static" data-keyboard="false" but it still closes. Additionally, I have ensured that the form tag is no ...

javascripthtmljquerybootstrap-4

How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class. In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using ...

css

Adjust the class based on the number of li elements

When there are more than two (li) tags, the ul tag should have the class "col_3"; otherwise it should have the class "col_2" For instance: If there are two columns <div class="container"> <ul class="col_2"> <li>One</li> ...

jquerycss

Angular API data causing an undefined error in the template

When attempting to display values in an HTML template from API data, I encountered an issue. Despite not defining all the values in the object, the data is displayed correctly. However, an error appears in the console: TypeError: Cannot read property &ap ...

htmljsonangular

What is the best way to access a component's value from a different component in Vue script?

I have two Vue components in my PHP file: "application" and "vn" component. I am trying to fetch {{obj.vacancies_left}} from the "vn" component and use it in the "application" component. However, I keep getting an undefined variable error. I attempted to r ...

javascriptvue.js

Learn how to collapse a collapsible section in Jquery Mobile by clicking on a link. Check out the example on JSFiddle

Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...

javascriptjqueryhtmljquery-mobile

Locating all elements on a webpage that are either above or below a specific element, capturing those that intersect visually

Is it possible to locate all the additional HTML elements that a particular element overlaps with, is positioned under, or intersects with? My goal is to ensure that this element is displayed above every other element. I am looking to identify all interse ...

javascripthtmlz-index

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

javascriptjqueryhtmlservlets

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

javascripthtmlcss