Question 300734 in Html Question posted in
Some basic documentation can be found here.

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

  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

Tags:

3

Answers


  1. 0 
    <!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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search