Dynamic Day-Night Toggle: Enhancing User Experience in Web Design
Welcome to our blog, where we explore the fascinating world of web design and user experience. Dive into the latest trends and innovations as we guide you through the creation of a dynamic day-night toggle for your website. Learn how to implement a seamless transition between light and dark modes, providing users with a personalized and visually comfortable browsing experience. Our step-by-step guide and insightful articles will empower you to elevate your web design skills. Join us on this journey to enhance the aesthetics and functionality of your website!
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
label.switch{
position:relative;
display: inline-block;
width: 60px;
height: 34px;
}
label.switch input{
opacity:0;width:0;height:0;
}
label.switch .slider{
position:absolute;
cursor:pointer;
top:0;
left: 0;
right: 0;
bottom:0;
background-color: #ccc;
-webkit-tranition:.4s;
transition:.4s;
border-radius: 34px;
}
label.switch .slider:before{
position: absolute;
content: "";
height: 26px;
width: 26px;
left:4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
label.switch input:checked + .slider{
background-color: #2196F3;
}
abel.switch input:focus + .slider
{
box-shadow:0 0 1px #2196F3;
}
label.switch input:checked +.slider:before
{
transform:translate(26px);
}
body.day-mode{
background-color: #fff;
color:#000;
}
body.night-mode{
background-color: #333;
color:#fff;
}
</style>
</head>
<body>
<h2>Day and Night Toggle</h2>
<label class="switch">
<input type="checkbox" onchange="toggleMode()" id="modeToggle" >
<span class="slider"></span>
</label>
<script>
function toggleMode()
{
var body = document.body;
var modeToggle = document.getElementById("modeToggle");
switch(modeToggle.checked)
{
case true:
// night Mode
body.classList.remove("day-mode");
body.classList.add("night-mode");
break;
case false:
// night Mode
body.classList.remove("night-mode");
body.classList.add("day-mode");
break;
}
}
</script>
</body>
</html>
Sandipan Kr Bag
I'm a dedicated full-stack developer, entrepreneur, and the proud owner of ocec.org.in , hailing from the vibrant country of India. My passion lies in creating informative tutorials and sharing valuable tips that empower fellow artisans in their journey. With a deep-rooted love for technology, I've been an ardent enthusiast of PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, Codeigniter, and Bootstrap from their earliest days. My philosophy revolves around the values of hard work and unwavering consistency, driving me to continuously explore, create, and share my knowledge with the tech community.
* Hire MeRelated Posts
জাভাস্ক্রিপ্ট কি? এটি কেন ব্যবহার করা হয় ?
জাভাস্ক্রিপ্ট লেখার পদ্ধতি
Step-by-Step Guide a Dynamic Image Slider with HTML, CSS, and JavaScript
2 Comments
https://Lvivforum.pp.ua/
Everyone loves it when folks get together and share opinions. Great blog, stick with it! https://Lvivforum.pp.ua/
Replyhttps://Lvivforum.Pp.ua/
I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently. I'm quite certain I'll learn many new stuff right here! Best of luuck for thhe next! https://Lvivforum.Pp.ua/
ReplyPost a Comment
Search
Latest Posts
Using AOS (Animate On Scroll) in React with Tailwind CSS
1 month ago
WebkitSpeechRecognition API
2 months ago
GitHub Understanding Common Prefixes in Conventional Commits
2 months ago
Subscribe to Our Newsletter
Get the latest updates straight to your inbox.
