photo courtesy
Introduction:
In the contemporary digital environment, incorporating a dark mode feature into your website can significantly enhance the user experience. Dark mode creates a visually appealing and relaxing browsing environment, lessening eye fatigue and enhancing comprehension. This article delves into the process of incorporating a dark mode into your online presence, providing insights and useful suggestions to ensure the smooth introduction of this desired function.
photo Google
HTML process of adding dark mode:
<!DOCTYPE html>
<html lang="en" class="light-mode">
<head>
<link rel="stylesheet" type="text/css" href="dark.css">
</head>
<body>
<!-- Page content -->
<span id="dark-mode-icon"></span>
<button id="dark-mode-toggle">Toggle Dark Mode</button>
<script src="dark.js"></script>
</body>
</html>
4. Implementing Dark Mode with CSS:
The CSS techniques used to implement dark mode effectively. Utilize media queries to detect user preferences, or provide a manual toggle option for users to switch between light and dark modes. Walk through the necessary CSS modifications for background colours, text colours, and other relevant elements.
.light-mode {
/* Light mode styles */
Colour: #000;
background-color: #fff;
}
.dark-mode {
/* Dark mode styles */
color: #fff;
background-color: #333;
}
/* Additional styles for elements in dark mode */
.dark-mode h1 {
color: #fff;
}
@media (prefers-color-scheme: dark) {
/* Styles for automatic dark mode */
html:not(.dark-mode) {
color: #fff;
background-color: #333;
}
/* Additional styles for elements in automatic dark mode */
html:not(.dark-mode) h1 {
color: #fff;
}
}
body {
/* Other body styles */
transition: background-color 0.3s ease, color 0.3s ease;
}
#dark-mode-icon {
width: 24px;
height: 24px;
background-image: url('dark.png');
background-size: cover;
/* Add other styling as needed */
}
5. The JavaScript part of dark mode:
document.addEventListener('DOMContentLoaded', () => {
const darkModeToggle = document.getElementById('dark-mode-toggle');
const html = document.querySelector('html');
const localStorageKey = 'darkMode';
// Retrieve user preference from local storage
const isDarkModeEnabled = JSON.parse(localStorage.getItem(localStorageKey));
// Apply the appropriate class based on the user's preference
if (isDarkModeEnabled) {
html.classList.add('dark-mode');
} else {
html.classList.remove('dark-mode');
}
darkModeToggle.addEventListener('click', () => {
// Toggle dark mode class
html.classList.toggle('dark-mode');
// Save user preference to local storage
localStorage.setItem(localStorageKey, html.classList.contains('dark-mode'));
});
});
Conclusion:
By incorporating a dark mode feature into your website, you can significantly enhance the user experience by providing a visually appealing, comfortable, and customizable browsing experience. Follow the steps outlined in this article, adapting them to suit your website's specific requirements. Embrace the benefits of dark mode and empower users with an immersive and enjoyable interface. Implementing dark mode can be a game-changer in providing an exceptional user experience while keeping your website up to date with modern design trends.
