Dark Mode Toggle

Written by @phuang 20 December 2022

Dark mode is a common practice to reduce eye strain caused by reading on a bright screen. Often modern web developers implement such a feature as it would be visually appealing for audience to view your website from their mobile devices at night. Below is an example of one way to add a 'dark-mode theme' to your website by creating separate light / dark themes and using JavaScript to toggle between them.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Toggle</title>

<!-- font awesome library include 4.7 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- font library -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

<!-- css styles -->
<style>
 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); 

/* default light theme */
:root, html{
  margin: 0;
  padding: 0;
  font-family: "Inter", arial, monospace;

  --primary-color: #f45b69;
  --secondary-color:#456990;
  --background-color: white;
  --button-color: black;
  --button-bg-color: yellow;
}

/* dark-mode theme */
:root[data-theme="dark-mode"]{
  
  --primary-color: #f45b69;
  --secondary-color:white;
  --background-color: rgb(43, 43, 43);
  --button-color: yellow;
  --button-bg-color: black;
}


/* main styles */
html, body{
  height: 100%;
  background-color: var(--background-color);
  margin: 0;
  padding: 0;

}

*{
  box-sizing: border-box;
  font-family: "Inter", arial, monospace;
  font-size: 1rem;
  transition: all 0.5s ease-in-out;
}

a{
  text-decoration: none;
  font-weight: 600;
  color: var(--secondary-color);
}

a:hover{
  color: var(--primary-color); 
}

main{
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 2rem;
}

main{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* navigation */
nav{
  display: flex;
  justify-content: space-between;
  background-color: var(--background-color);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
nav ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
nav ul li{
  display: flex;
  list-style-type: none;
  min-width: 5rem;
  margin: 1rem;
}

nav .logo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

nav .logo i{
  color: var(--secondary-color);
}

button.login{
  border: 2px var(--secondary-color) solid;
  padding: 0.5rem;
  background: transparent;
  font-weight: bold;
  color: var(--secondary-color);
}

button.login:hover{
  border: 2px var(--primary-color) solid;
  color: var(--button-color);
}

/* button styles */
button.toggle-mode{
  padding: 0;
  width: 7rem;
  
  display: flex;
  justify-content: start;
  align-items: center;

  background-color: var(--button-color);
  border-radius: 5em;
  border: 0;
}
button.toggle-mode i {

  background-color: var(--button-bg-color); 

  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0.5rem;

  border: 2px var(--button-color) solid;
  color: var(--button-color);

}

button.toggle-mode:hover{
  cursor: pointer;

}

button.toggle-mode i{
  position: relative;
}

button.toggle-mode i:before{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(20%, 20%);

  width: 32px;
  height: 32px;

}

/* dark-mode toggle animation classes */
.darkmode-toggle{
  animation: darkmode_toggle;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
}

@keyframes darkmode_toggle{
  0%{
    transform: translateX(0%);
  }
  100%{
      
    transform: translateX(133%);

  }
}

.darkmode-toggle-normal{
  animation: darkmode_toggle_normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
}

@keyframes darkmode_toggle_normal{
  0%{
    transform: translateX(133%);
  }
  100%{  
    transform: translateX(0%);
  }
}

</style>
</head>

<body>


<section>
  <nav>
    <div class="logo"><i class="fa fa-grav fa-3x" aria-hidden="true"></i></div>
    <ul>
      <li><a href="">SERVICES</a></li>
      <li><a href="">CONTACT US</a></li>

      <li><button class="login">LOGIN / SIGN UP</button></li>
    </ul>
  </nav>
</section>

<main>
    <button class="toggle-mode js-toggle-mode"><i class="fa fa-moon-o fa-2x" aria-hidden="true"></i></buton>
</main>

  


<script>


/*   

Tutorial Description

Dark mode is a common practice to reduce eye strain caused by reading on a bright screen. Often modern web developers implement such a feature as it would be visually appealing for audience to

view your website from their mobile devices at night. Below is an example of one way to add a 'dark-mode theme' to your website by creating separate light / dark themes and using JavaScript  to toggle between them. 

*/

const dark_mode_toggle = document.querySelector(".js-toggle-mode");

if(dark_mode_toggle != null){

  dark_mode_toggle.addEventListener("click", event => {

    const icon = event.currentTarget.querySelector("i");

    if(icon.classList.contains("darkmode-toggle")){

      icon.classList.remove("darkmode-toggle");
      icon.classList.add("darkmode-toggle-normal");

      icon.classList.remove("fa-sun-o");
      icon.classList.add("fa-moon-o");

      
      document.documentElement.setAttribute("data-theme", "");
    }else{
      icon.classList.remove("darkmode-toggle-normal");
      icon.classList.add("darkmode-toggle");

      icon.classList.remove("fa-moon-o");
      icon.classList.add("fa-sun-o");
      
      document.documentElement.setAttribute("data-theme", "dark-mode");
    }

    

  })
}


</script>
</body>
</html><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!

P

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2