Maintain consistent theme across various pages using javascript

Question

Maintain consistent theme across various pages using javascript

So I successfully implemented a dark mode on the front page using the following script (sourced from W3schools) :

<script>
function darklightmode() {
    var element = document.body;
    element.classList.toggle("dmode");
} </script>

Here's the button code:

<button onclick="darklightmode()" style="background:none; border: none;">
                        <img src="images/ld-icon.png" class="icon">
                    </button>

I also added some CSS for an example:

.dmode li a{
transition: 1s all;
color: #2E3440;
background: none;}

Now my question is, how can I ensure that the selected mode (light or dark) remains consistent across multiple pages without reverting back to default when navigating to another page? Any Javascript suggestions would be greatly appreciated. Thanks!

javascript html css darkmode

Answer 1

Answer №1

To retain the current theme, it's important to store it somewhere accessible. Utilizing localstorage can be an effective solution.

Referencing advice from How do I implement a dark mode theme across multiple pages? (note: this query is a duplicate):


    checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

Make sure to incorporate the following snippet on every page:


    if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }

Answer 2

To retain the current theme, it's important to store it somewhere accessible. Utilizing localstorage can be an effective solution.

Referencing advice from How do I implement a dark mode theme across multiple pages? (note: this query is a duplicate):


    checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

Make sure to incorporate the following snippet on every page:


    if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }

Answer 3

Answer №2

My dark theme is consistently defined by the class 'darkmode' in the body tag across all of my HTML files:

 <body class="darkmode">

To address this issue, the most efficient solution involves utilizing the toggle function alongside localStorage:

const body = document.querySelector("body");
const toggleMode = document.querySelector(".toggle");

toggleMode.addEventListener("click", () => {
  let currentTheme = body.className;

  localStorage.setItem("Mytheme", currentTheme);
  body.classList.toggle("darkmode");
});

In every HTML file, ensure to include the following code (as suggested by Sid):

if (localStorage.getItem("Mytheme"))
        body.classList.toggle(localStorage.getItem("Mytheme"));

Answer 4

My dark theme is consistently defined by the class 'darkmode' in the body tag across all of my HTML files:

 <body class="darkmode">

To address this issue, the most efficient solution involves utilizing the toggle function alongside localStorage:

const body = document.querySelector("body");
const toggleMode = document.querySelector(".toggle");

toggleMode.addEventListener("click", () => {
  let currentTheme = body.className;

  localStorage.setItem("Mytheme", currentTheme);
  body.classList.toggle("darkmode");
});

In every HTML file, ensure to include the following code (as suggested by Sid):

if (localStorage.getItem("Mytheme"))
        body.classList.toggle(localStorage.getItem("Mytheme"));

Maintain consistent theme across various pages using javascript

Answer №1

Answer №2

Similar questions

Utilize AngularJS to compile a roster of participants

Using the $lookup aggregation stage to $group a nested array in MongoDB

Can we streamline this jQuery code by utilizing .hasClass and .bind?

Checking for the Existence of a Database Table in HTML5 Local Storage

Accessing information from req.files in a TypeScript environment

Adjust the parent container to perfectly accommodate the child element

The CSS dropdown menu is malfunctioning on Internet Explorer and Firefox

Saving modified input data for submission using Vue

Accessing PHP variables within the HTML portion of a PHP document

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Leverage Express JS to prevent unauthorized requests from the Client Side

the scrollbars are appearing on the window instead of within my div container

When working with VueJS and Vuex, using the splice method to replace an item (object) in an array stored in Vuex does not trigger a re-render of the

What is the best way to link options from a select directive with a different array?

Synchronizing Form Data in Angular 5: Pass and Populate Dropdowns between Components

Incorporate the feedback received from the user in the previous trial as a prompt for the next

Ways to display map results in multiple columns utilizing react

drawing tool with JavaScript and HTML5

Utilizing JQuery to select list items for pagination purposes

Utilizing jQuery UI autocomplete with AJAX and JSON data sources