Storing Dark Mode Preference in Local Storage using JavaScript

Question

Storing Dark Mode Preference in Local Storage using JavaScript

I recently implemented dark mode on my website and it's working flawlessly.

However, every time I refresh the page, it reverts back to the default Day Mode view. Is there a way to save these preferences?

In the HTML section:

    <body>
    <div class="main-page" id="main-page">
        <a id="darkmode" onclick="myFunction()" style="display: block; position: fixed; z-index: 2147483647;"><span><i class="fa fa-moon" id="darkIcon"></i></span></a>
    </div>
</body>

And in the JavaScript section:

    function myFunction() {
    var element = document.getElementById("main-page");
    var icon = document.getElementById("darkIcon");
    element.classList.toggle("active-dark");

    if (element.className == ["main-page active-dark"]){
        if (icon.className == "fa fa-moon"){
            icon.classList.toggle("fa-sun");
        }else {
            icon.classList.toggle("fa-moon");

        }

    }
    if (element.className == "main-page"){
        if (icon.className == "fa fa-sun"){
            icon.classList.toggle("fa-moon");
        }else {
            icon.classList.toggle("fa-sun");

        }


    }
}

Please Note:

To switch to dark mode, simply add "active-dark" after the "main-page" class, and to go back to light mode, remove the class.

javascript

Answer 1

Answer №1

To keep track of the dark mode state within your myFunction method, store it in the browser's localStorage.

function myFunction() {
     localStorage.setItem('isDarkMode', true);

Then, include the following line in your JavaScript code.

Ensure that the DOM has finished loading before running this line of code.

if (localStorage.getItem('isDarkMode') === 'true') {
    document.getElementById('main-page').classList.add('active-dark');
}

Answer 2

To keep track of the dark mode state within your myFunction method, store it in the browser's localStorage.

function myFunction() {
     localStorage.setItem('isDarkMode', true);

Then, include the following line in your JavaScript code.

Ensure that the DOM has finished loading before running this line of code.

if (localStorage.getItem('isDarkMode') === 'true') {
    document.getElementById('main-page').classList.add('active-dark');
}

Answer 3

Answer №2

Check out this complete code snippet to automatically detect the user's preference for dark mode and store it in local storage to maintain the current mode during their session.

When the user interacts with the dark mode toggle button, the following code will be executed. Remember to define the CSS class .dark-mode with the necessary styling.

$(document).ready(function () {

   $("#dark-mode").click(function () {
      $("body").toggleClass("dark-mode");
      if (localStorage.hasOwnProperty('isDarkMode')) {
         if (localStorage.getItem('isDarkMode') === 'true') {
            localStorage.setItem('isDarkMode', 'false');
         }
         else if (localStorage.getItem('isDarkMode') === 'false') {
            localStorage.setItem('isDarkMode', 'true');
         }
      }
   })


   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      if (!(localStorage.hasOwnProperty('isDarkMode'))) {
         $("body").addClass("dark-mode");
         localStorage.setItem('isDarkMode', true);
      }
   }
   else {
      if (!(localStorage.hasOwnProperty('isDarkMode'))) {
         $("body").removeClass("dark-mode");
         localStorage.setItem('isDarkMode', false);
      }
   }

   if (localStorage.hasOwnProperty('isDarkMode')) {

      if (localStorage.getItem('isDarkMode') === 'true') {
         $("body").addClass("dark-mode");
      }
      else if (localStorage.getItem('isDarkMode') === 'false') {
         $("body").removeClass("dark-mode");
      }
   }
})

Answer 4

Check out this complete code snippet to automatically detect the user's preference for dark mode and store it in local storage to maintain the current mode during their session.

When the user interacts with the dark mode toggle button, the following code will be executed. Remember to define the CSS class .dark-mode with the necessary styling.

$(document).ready(function () {

   $("#dark-mode").click(function () {
      $("body").toggleClass("dark-mode");
      if (localStorage.hasOwnProperty('isDarkMode')) {
         if (localStorage.getItem('isDarkMode') === 'true') {
            localStorage.setItem('isDarkMode', 'false');
         }
         else if (localStorage.getItem('isDarkMode') === 'false') {
            localStorage.setItem('isDarkMode', 'true');
         }
      }
   })


   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      if (!(localStorage.hasOwnProperty('isDarkMode'))) {
         $("body").addClass("dark-mode");
         localStorage.setItem('isDarkMode', true);
      }
   }
   else {
      if (!(localStorage.hasOwnProperty('isDarkMode'))) {
         $("body").removeClass("dark-mode");
         localStorage.setItem('isDarkMode', false);
      }
   }

   if (localStorage.hasOwnProperty('isDarkMode')) {

      if (localStorage.getItem('isDarkMode') === 'true') {
         $("body").addClass("dark-mode");
      }
      else if (localStorage.getItem('isDarkMode') === 'false') {
         $("body").removeClass("dark-mode");
      }
   }
})

Answer 5

Answer №3

The location where you generate your HTML page will determine how to handle saving data for dark mode.

If the generation happens on the client side (browser), you can store it in session storage like this:

sessionStorage.setItem("darkmode", true)

To retrieve it when loading the page, use:

sessionStorage.getItem("darkmode")

If the rendering occurs on the server side, saving it in a session variable would be necessary. The method may vary based on the server-side technology being used. A request to the server would then be required to set this variable.

Another option is using a cookie, which can be accessed both on the server and the client side. Set a cookie with this code:

document.cookie = "darkmode=true"

UPDATE:

It's recommended to use local storage instead of session storage because it persists beyond the current session. Here is how to save data in local storage:

localStorage.setItem("darkmode", true)

and retrieve it with:

localStorage.getItem("darkmode")

Answer 6

The location where you generate your HTML page will determine how to handle saving data for dark mode.

If the generation happens on the client side (browser), you can store it in session storage like this:

sessionStorage.setItem("darkmode", true)

To retrieve it when loading the page, use:

sessionStorage.getItem("darkmode")

If the rendering occurs on the server side, saving it in a session variable would be necessary. The method may vary based on the server-side technology being used. A request to the server would then be required to set this variable.

Another option is using a cookie, which can be accessed both on the server and the client side. Set a cookie with this code:

document.cookie = "darkmode=true"

UPDATE:

It's recommended to use local storage instead of session storage because it persists beyond the current session. Here is how to save data in local storage:

localStorage.setItem("darkmode", true)

and retrieve it with:

localStorage.getItem("darkmode")

Answer 7

Answer №4

Here is my personal viewpoint:

                        <style>
                        .dark-mode {
                          background-color: black;
                          color: white;
                        }
                        </style>
                    <div>
                        <button class="btn btn-light btn-sm" onclick="myFunction()">Toggle dark mode</button>
                        <script>
                        function myFunction() {
                            if (localStorage.getItem('isDarkMode')=='true'){
                                localStorage.setItem('isDarkMode', false)} 
                                else 
                                {localStorage.setItem('isDarkMode', true)}
                                toggle_color();
                        };

                        function toggle_color(){
                            if (localStorage.getItem('isDarkMode')=='true'){
                            
                            document.getElementById('main').classList.add('dark-mode');
                        }
                        if (localStorage.getItem('isDarkMode') === 'false'){
                                
                            document.getElementById('main').classList.remove('dark-mode');
                            };
                        }
                        toggle_color()
                        </script>
                    <div>

Answer 8

Here is my personal viewpoint:

                        <style>
                        .dark-mode {
                          background-color: black;
                          color: white;
                        }
                        </style>
                    <div>
                        <button class="btn btn-light btn-sm" onclick="myFunction()">Toggle dark mode</button>
                        <script>
                        function myFunction() {
                            if (localStorage.getItem('isDarkMode')=='true'){
                                localStorage.setItem('isDarkMode', false)} 
                                else 
                                {localStorage.setItem('isDarkMode', true)}
                                toggle_color();
                        };

                        function toggle_color(){
                            if (localStorage.getItem('isDarkMode')=='true'){
                            
                            document.getElementById('main').classList.add('dark-mode');
                        }
                        if (localStorage.getItem('isDarkMode') === 'false'){
                                
                            document.getElementById('main').classList.remove('dark-mode');
                            };
                        }
                        toggle_color()
                        </script>
                    <div>

Storing Dark Mode Preference in Local Storage using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method for shifting content as the window is resized to ensure it remains in its original position?

Accessing target.com using a script for login

WebGl - Perspective skewing perspective

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

Tips for retrieving a variable from an XML file with saxonjs and nodejs

Unlocking the potential of # to craft interactive web pages

I am curious as to how this function is aware of the specific attribute that is being passed

What is the best way to increase a specific value in an array of objects once it has been located (using findOne()), but before it is

Is there a way to easily access the automated departure range feature of a date

Struggling to populate dropdown with values from array of objects

Tips for displaying ajax search results in Laravel views

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Tips for organizing multiple TextField components within a Grid container using Material-UI

Link specifically for the ADFS 2.0 single sign-on application

What could be causing the function to return undefined when using fetch, axios, ajax, or a promise?

There seems to be a discrepancy with the IP to hex conversion equation in my JavaScript code. The result I'm getting doesn't align with what other

What is the functionality behind a free hosting website?

Understanding sessionToken functionality and enabling multiple device logins for a single user simultaneously in Parse

Having issues with email verification and the length of phone numbers not functioning properly

Guide to retrieving a specific cookie value with socket.io