How to create Day Night effect on Website ?

SEO Help and Tips

How to create Day Night effect on Website ?

Here is the code sample to create Day Night effect on your Website. Light and Dark Mood.

Head:

    <style>

        body {

            padding: 15px;

            background-color: white;

            color: black;

            font-size: 15px;

        }

        .dark-mode {

            background-color: black;

            color: white;

        }

        .light-mode {

            background-color: white;

            color: black;

        }

    </style>

Body:

    <h3 id="DarkModetext"></h3>

    <button type="button" class="btn btn-primary mt-3" onclick="toggleMode()">Switch</button>

    <script>

        // Function to toggle the mode

        function toggleMode() {

            let element = document.body;

            let content = document.getElementById("DarkModetext");

            if (element.classList.contains("dark-mode")) {

                element.classList.remove("dark-mode");

                element.classList.add("light-mode");

                content.innerText = "Light";

                localStorage.setItem("mode", "light-mode");

            } else {

                element.classList.remove("light-mode");

                element.classList.add("dark-mode");

                content.innerText = "Dark";

                localStorage.setItem("mode", "dark-mode");

            }

        }

        // Check the stored mode and apply it on page load

        document.addEventListener("DOMContentLoaded", function() {

            let savedMode = localStorage.getItem("mode");

            if (savedMode === "dark-mode") {

                toggleMode();

            }

        });

    </script>