Introduction:
Dark/Light Mode are one of the advanced options available on a website that change the colors of the page. Light mode is the normal mode but in dark mode, background color is dark and the text is light (usually white text), which looks beautiful especially in low light environment. In this blog we are going to design "Dark/Light Mode" by using a toggle button. It can be done by using HTML, CSS and JavaScript.
Code:
HTML: The HTML code will make the basic structure of the web page including text and toggle button for Dark/Light mode.
CSS: CSS code will be used to control the presentation, layout, and style of web page. It will add icons for dark and light mode inside the toggle button. It will also align the toggle button and icons.
JavaScript: JavaScript script will help to toggles between Dark mode and light mode. It also saves the current mode preference ('dark' or 'light') to the browser's local storage, so the user's preference is remembered even after refreshing the page or closing the browser.
Steps to make working Dark/Light Mode Toggle button
Follow these instructions to make a working Dark/Light mode toggle button:
- Create a new folder with any name you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The extension of index file must be .html - Create a
style.cssfile. The extension of the style file must be .css - Create a
script.jsfile. The extension of the script file must be .js
HTML:
Copy this HTML code and save it as "index.html" on your device.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark/Light Mode Toggle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
<input type="checkbox" id="mode-toggle" class="toggle-checkbox">
<label for="mode-toggle" class="toggle-label"></label>
<script src="script.js"></script>
</body>
</html>
CSS:
Copy this CSS code and save it as "style.css" on your device.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.3s ease;
}
.light-mode {
background-color: #f0f0f0;
color: #333;
}
.dark-mode {
background-color: #333;
color: #fff;
}
.toggle-checkbox {
display: none;
}
.toggle-label {
position: fixed;
top: 10px;
right: 10px;
width: 50px;
height: 26px;
background-color: #ccc;
border-radius: 13px;
cursor: pointer;
}
.toggle-label:before {
content: '\1F31E'; /* Sun icon */
font-size: 16px;
line-height: 26px;
position: absolute;
top: 0;
left: 3px;
color: #333;
transition: transform 0.3s ease;
}
.toggle-checkbox:checked + .toggle-label:before {
content: '\1F319'; /* Moon icon */
transform: translateX(24px);
}
JavaScript:
Copy this JavaScript code and save it as "script.js" on your device.
document.addEventListener('DOMContentLoaded', function() {
const modeToggle = document.getElementById('mode-toggle');
const body = document.body;
modeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
body.classList.toggle('light-mode');
// Save the current mode preference to local storage
const currentMode = body.classList.contains('dark-mode') ? 'dark' : 'light';
localStorage.setItem('mode', currentMode);
});
// Check for user's preference from local storage
const savedMode = localStorage.getItem('mode');
if (savedMode) {
body.classList.add(savedMode + '-mode');
}
});
0 Comments