Empowering Your Users with a Comfortable Reading Experience
In today’s digital age, where screens dominate our attention, user experience is paramount. This includes enabling optional features such as dark mode, a feature that provides darker colors for websites and applications.
Dark mode not only reduces visual strain in low-light environments but can also improve battery life on some devices.
This blog post delves deeper into adding easy-to-use dark mode functionality to your website using basic web development technologies: HTML, CSS, and JavaScript.
Understanding Dark Mode and its Benefits
Dark mode provides new website themes with dark backgrounds and light text and special UI elements. This approach offers several advantages:
Improved readability: A dark background with glossy text can make a big difference, making the content easier to read, especially in low light.
Reduced visual strain: Lower levels of glare from dark subjects can reduce eye fatigue during prolonged screen exposure.
Improved battery life: Dark screens on devices with OLED display can save battery life.
Modern Aesthetic: Dark Mode is a popular design, which gives your website a sleek modern look.
Implementing Dark Mode with HTML, CSS & JavaScript
Here’s a breakdown of the steps involved:
- HTML Structure:
- Create a basic HTML document with a well-structured layout for your website content.
- CSS Styling:
- In your CSS stylesheet, define styles for your website’s lighting appearance.
- Create a separate section for the Dark Mode theme, targeting the background color, text color, and other relevant elements.
- JavaScript Functionality:
- Write JavaScript functions to handle user interaction with the dark mode toggle button.
- This functionality can dynamically add or remove dark mode classes from the body element, effectively switching between light and dark objects.
Example Code Snippets
This blog post presents two code examples that demonstrate how to implement dark mode functions using different methods in JavaScript:
Example 1: Use different functions (darkMode() and lightMode()) to switch between subjects.
Example 2: Uses the classList.toggle() method in JavaScript for a concise solution.
For light mode:
<!-- Filename:index.html -->
<!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>
How to Make Dark Mode for Websites using HTML CSS & JavaScript ?
</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
.light-mode {
background-color: white;
color: black;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>
This is a sample GeeksForGeeks Text.
Dark Mode Websites using Html CSS &
Javascript
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" />
<h3 id="DarkModetext">Dark Mode is OFF</h3>
<button onclick="darkMode()">Darkmode</button>
<button onclick="lightMode()">LightMode</button>
<script>
function darkMode() {
let element = document.body;
let content = document.getElementById("DarkModetext");
element.className = "dark-mode";
content.innerText = "Dark Mode is ON";
}
function lightMode() {
let element = document.body;
let content = document.getElementById("DarkModetext");
element.className = "light-mode";
content.innerText = "Dark Mode is OFF";
}
</script>
</body>
</html>For Dark Mode:
<!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>
How to Make Dark Mode for Websites using HTML CSS & JavaScript ?
</title>
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Dark Mode tutorial using HTML, CSS and JS</h2>
<p>GeeksForGeeks Sample Text</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" />
<div>
<button onclick="darkMode()">Darkmode</button>
</div>
<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
Beyond the Basics: Fine-tuning Dark Mode
While the provided examples offer a solid foundation, consider these points for a more polished dark mode experience:
- Local Storage: Implement logic to remember user preferences and retain the chosen theme even after refreshing the page. Local storage can be used to achieve this.
- Color contrast: Make sure there is adequate color contrast between text and background elements to maintain access for the visually impaired.
- Iconography: Adapt icons or use icon libraries that offer light and dark variations for a seamless visual transition.
Conclusion:
Enhancing User Experience with Dark ModeIntegrating a user-friendly dark mode functionality is a valuable addition to your website’s user experience. It caters to user preferences, improves readability, and offers a modern aesthetic. By following the steps outlined in this blog post and considering the additional tips, you can effectively implement dark mode on your website using HTML, CSS & JavaScript.