About Us
Egomerit is more than just a provider of IT services; we are your trusted partner on the journey to software excellence. With a focus on quality, reliability, and customer satisfaction, we deliver customized solutions that exceed expectations
Get a free quote
Front-End Development , Programming
- By EGOMERIT
- 0 Comments
24 September 2023
Page Title
Creating a page with light and dark mode that switches when toggled by an icon button involves a few steps. Here’s a step-by-step guide:
Step 1: Set up your HTML structure
Start by creating a basic HTML structure for your page. Add relevant elements, such as a header, main content section, and a footer. For example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Light/Dark Mode Page</title>
<script src="https://kit.fontawesome.com/db4319a107.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<!-- Add your main content here -->
</main>
<footer>
<!-- Add your footer content here -->
</footer>
<script src="script.js"></script>
</body>
</html>Step 2: Style your page with CSS
Create a CSS file (styles.css) and define the styles for your page in both light and dark modes. Specify different styling properties for elements based on the mode. Here’s an example:
CSS
body {
/* Light mode styles */
background-color: #ffffff;
color: #000000;
}
body.dark-mode {
/* Dark mode styles */
background-color: #000000;
color: #ffffff;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
}Step 3: Add an icon button for toggling modes
Inside the header or any suitable location, add an icon/button element that will be used to toggle between light and dark modes. You can use an existing icon library or create your own icon. For example, let’s use a simple sun and moon icon:
HTML
<header>
<!-- Add your header content here -->
<h1>Page Title</h1>
<button id="mode-toggle" onclick="toggleMode()"><i id="icon" class="fas fa-sun"></i></button>
</header>Note: For the above example, make sure to include the Font Awesome CDN in your HTML file for the sun icon to display properly.
Step 4: Implement the JavaScript functionality
Create a JavaScript file (script.js) and write the code to toggle the light and dark modes. You can use the classList.toggle method to switch between different classes on the body element. Here’s an example code:
JavaScript
function toggleMode() {
const body = document.body;
body.classList.toggle("dark-mode");
}
// Get references to the button and icon elements
const modetoggle = document.getElementById('mode-toggle');
const icon = document.getElementById('icon');
// Add a click event listener to the button
modetoggle.addEventListener('click', function () {
// Check the current class of the icon
if (icon.classList.contains('fa-sun')) {
// If it has the "fa-sun" class, change to "fa-moon"
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
} else {
// If it has the "fa-moon" class, change to "fa-sun"
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
}
});Step 5: Test and refine
Open your HTML file in a web browser and test the functionality. Clicking the icon/button should change the page’s background and text colors to switch between light and dark modes.
Feel free to further customize or enhance this starting point based on your requirements, such as adding transitions/animations, storing the user’s preference in local storage, or using different icons/styles.
EGOMERIT
Visit: http://egomerit.com
© 2024 EGOMERIT LLC, All Rights Reserved.
- Ways to Donate:
Leave A Comment