Html - How I can add transition while switching from light mode to dark mode in Javascript

AliRaza
December 8, 2023
213 views
3 votes
3 Answers

  var container = document.querySelector(".container")
    var light  = document.getElementById("light");
    var dark  = document.getElementById("dark");


    light.addEventListener('click', lightMode);
    function lightMode(){
        container.style.backgroundColor = "white";
        container.style.color = "black";
        
    }
    dark.addEventListener('click', darkMode);
    function darkMode() {
        container.style.backgroundColor = "black";
        container.style.color = "white";
    }

It is my code, please tell me how can I add transition when a user clicks on dark mode.
Now, It is switching very fastly which is not attractive for user and for me also.
Please tell me if you know

I’m Expecting the transition to be added when I switch from dark mode to light mode
It Should not instantly change it. It must have a transition of 1s ease in

Answers

<!DOCTYPE html>
<html>
<head>
<style>
.container {
transition: background-color 1s ease, color 1s ease;
}
</style>
</head>
<body>

<div class="container">
<h1>Hello, how are you</h1>
<button id="light" type="button">Light mode</button>
<button id="dark" type="button">Dark mode</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
var container = document.querySelector(".container");
var light = document.getElementById("light");
var dark = document.getElementById("dark");

light.addEventListener('click', lightMode);
function lightMode() {
container.style.backgroundColor = "white";
container.style.color = "black";
}

 dark.addEventListener('click', darkMode);
 function darkMode() {
 container.style.backgroundColor = "black";
 container.style.color = "white";
 }  
 });
 </script>

</body>
</html>

The ease timing function is set to 1s at tag, you can adjust it as you need.

Here is the complete answer

<!DOCTYPE html>
<html>
<body>
<style>
.container {
  height: 500px;
  width: 100%;
  margin: auto;
  text-align: center;
  transition: all 1s ease;
}
</style>
<div class="container">
<h1>
Hello, how are you?
</h1>
<button id="light" type="button">Light mode</button>
<button id="dark" type="button">Dark mode</button>
</div>

</body>
<script>
var container = document.querySelector(".container")
    var light  = document.getElementById("light");
    var dark  = document.getElementById("dark");


    light.addEventListener('click', lightMode);
    function lightMode(){
        container.style.backgroundColor = "white";
        container.style.color = "black";
        
    }
    dark.addEventListener('click', darkMode);
    function darkMode() {
        container.style.backgroundColor = "black";
        container.style.color = "white";
    }
</script>
</html>

You can achieve this by adding CSS transitions and toggling classes using JavaScript.

Check code below:

var container = document.querySelector(".container");
var light = document.getElementById("light");
var dark = document.getElementById("dark");

light.addEventListener('click', lightMode);
function lightMode() {
    container.classList.remove('dark-mode');
    container.classList.add('light-mode');
}

dark.addEventListener('click', darkMode);
function darkMode() {
    container.classList.remove('light-mode');
    container.classList.add('dark-mode');
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.container {
    padding: 20px;
    text-align: center;
    transition: background-color 1s ease, color 1s ease;
}

.dark-mode {
    background-color: #00008b;
    color: #ADD8E6;
}

.light-mode {
    background-color: #ADD8E6;
    color: #00008b;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Transition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Hello, World!</h1>
        <button id="light">Light</button>
        <button id="dark">Dark</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

You should now have a smooth transition when switching between light mode and dark mode. Feel free to customize the styles and transition duration according to your preferences.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How I can add transition while switching from light mode to dark mode in Javascript

Answers