Auto Dark Mode Scheduler | Switch Between Light & Dark Automatically | FuzzuTech Project
Demo :
Click Video 👇👇👇
🧩 Key Features:
-
Automatically switches theme based on local time
-
Fully responsive and lightweight
-
Clean UI with modern design
-
Dark mode between 7PM–7AM
-
Light mode during day hours
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Auto Dark Mode Scheduler</title>
<style>
/* Base Styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
color: #222;
transition: background-color 0.8s ease, color 0.8s ease;
margin: 0;
padding: 2rem;
text-align: center;
}
.container {
max-width: 600px;
margin: auto;
padding: 2rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
/* Dark Mode Styles */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode .container {
background-color: #1e1e1e;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
/* Heading */
h1 {
margin-bottom: 1rem;
font-weight: 700;
}
/* Paragraph */
p {
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="container">
<h1>Auto Dark Mode Scheduler</h1>
<p>This website switches between Light and Dark mode based on your local time.</p>
</div>
<script>
function applyThemeBasedOnTime() {
const hour = new Date().getHours();
if (hour >= 19 || hour < 7) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// Initial call
applyThemeBasedOnTime();
// Reapply theme every 15 minutes to catch time change
setInterval(applyThemeBasedOnTime, 900000);
</script>
</body>
</html>
Comments
Post a Comment