Dark Mode Toggle
Written by 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:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
AstroAudrey, admin_js, bloxio, yqaice, flooketsu
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!