Can the CSS styles of a webpage be modified post-page load?

Question

Can the CSS styles of a webpage be modified post-page load?

Hello there! I've been working on implementing a "dark mode/light mode" feature for my website. My approach involves using two different CSS style sheets and toggling between them using a single button

So far, I've experimented with various methods like setAttribute, innerHTML, and removeAtribute to achieve this functionality. I even tried moving the contents of one style sheet into <style> tags but couldn't get it to work as intended.

Switch to Light Mode

function light(){

    document.getElementById("css").setAttribute("href", "LIGHTMODE.CSS")
    document.getElementById("darkmode").innerHTML = "Switch to Light Mode"
    document.getElementById("darkmode").onclick = "dark()"
}

function dark(){
    document.getElementById("css").setAttribute("href", "DARKMODE.CSS")
    document.getElementById("darkmode").innerHTML = "Switch to Dark Mode"
    document.getElementById("darkmode").onclick = "light()"
}

The goal is to identify the elements by their IDs and dynamically change the href attribute based on user interaction

javascript css function stylesheet

Answer 1

Answer №1

You have the ability to load both stylesheets and toggle between them whenever you need.

<link rel="stylesheet" href="darkmode.css" class="css dark">
<link rel="stylesheet" href="lightmode.css" class="css light" disabled>

<script>
    function setMode(mode) {
        document.querySelectorAll('link.css').forEach(sheet => {
            sheet.disabled = !sheet.classList.contains(mode);
        })
    }
    setMode('dark');
    setMode('light');
</script>

Upon loading the page, the light stylesheet is initially disabled.

The advantage of this approach is that even though the stylesheet is disabled, it is still loaded during page initialization. This results in an instant switch between styles without any delay caused by loading CSS for the other style.

Answer 2

You have the ability to load both stylesheets and toggle between them whenever you need.

<link rel="stylesheet" href="darkmode.css" class="css dark">
<link rel="stylesheet" href="lightmode.css" class="css light" disabled>

<script>
    function setMode(mode) {
        document.querySelectorAll('link.css').forEach(sheet => {
            sheet.disabled = !sheet.classList.contains(mode);
        })
    }
    setMode('dark');
    setMode('light');
</script>

Upon loading the page, the light stylesheet is initially disabled.

The advantage of this approach is that even though the stylesheet is disabled, it is still loaded during page initialization. This results in an instant switch between styles without any delay caused by loading CSS for the other style.

Answer 3

Answer №2

Simply inserting the href into an existing element won't trigger the browser to fetch the new CSS automatically.

Also, it seems that both your dark and light functions are utilizing the same CSS file called LIGHTMODE.CSS. Consider using DARKMODE.CSS within the dark function instead.

function dark(){
    // Locate the HTML head element
    var head = document.getElementsByTagName('HEAD')[0];

    // Create a new link Element
    var link = document.createElement('link');

    // Set the attributes for the link element
    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'DARKMODE.CSS';

    // Append the link element to the HTML head
    head.appendChild(link);
}

Answer 4

Simply inserting the href into an existing element won't trigger the browser to fetch the new CSS automatically.

Also, it seems that both your dark and light functions are utilizing the same CSS file called LIGHTMODE.CSS. Consider using DARKMODE.CSS within the dark function instead.

function dark(){
    // Locate the HTML head element
    var head = document.getElementsByTagName('HEAD')[0];

    // Create a new link Element
    var link = document.createElement('link');

    // Set the attributes for the link element
    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'DARKMODE.CSS';

    // Append the link element to the HTML head
    head.appendChild(link);
}

Can the CSS styles of a webpage be modified post-page load?

Answer №1

Answer №2

Similar questions

Best Method for Updating a Single Scope and Setting the Others to False in AngularJS

Updating ngModel using the value retrieved from a service call

The data retrieved using Ionic 3 Angular Fire's payload.val() seems to be returning

How to achieve a seamless iframe effect using CSS

After repeated attempts to initialize and destroy, Froala encounters issues when loading a textarea via Ajax

How can one make the image pop and stand out from its background?

The Three.js raycaster fails to intersect with objects once they have been displaced from their original position

Set the value of a variable to the result of a JavaScript function

What are some ways to reuse an angular component multiple times?

Is there a way to transform a fixed parameter into a user input value and display the function's outcome on a different page?

Having trouble binding form data to a React component with the onChange() method?

"Utilizing Bootstrap to create a space-saving table layout with an

Can RethinkDB and Node.js/Express handle parallel queries with multiple connections?

programming / mathematics - incorrect circular item rotation

Issue with displaying a vTable component in VueJS / Vuetify

Having trouble executing an npm script - getting an error message that reads "Error: spawn node_modules/webpack/bin/webpack.js EACCES"

Modify the CSS color attribute interactively by clicking

Alter the hue of the div

Generate a .py file through an HTML button click and save it to your device

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks