Implement Dark Mode in Websites Using HTML CSS & JavaScript
Last Updated :
06 Feb, 2025
Improve
Dark and light modes let users switch between a dark background with light text and a light background with dark text, making websites more comfortable and accessible based on their preferences or surroundings.
What We’re Going to Create
- A button allows users to switch between dark and light themes dynamically.
- Background, text colors, and other visual elements change based on the selected mode.
- Handles the theme switch, ensuring a smooth transition for a personalized user experience.
Project Preview
Implement Dark Mode in Websites -HTML and CSS code
This is the basic structure of the webpage. The page will feature a button to toggle between dark and light modes.
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: background-color 0.3s, color 0.3s;
}
.container {
text-align: center;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
background-color: white;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
body.light-mode {
background-color: #f4f4f4;
color: #333;
}
body.dark-mode {
background-color: #333;
color: brown;
}
h1 {
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.6;
margin: 10px 0;
}
ul {
text-align: left;
padding-left: 20px;
margin-top: 20px;
}
li {
margin: 8px 0;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Dark/Light Mode Toggle</h1>
<p>
This page demonstrates a simple yet powerful way to switch between
<strong>dark</strong> and
<strong>light</strong> modes for a better user experience.
</p>
<p>
Switching to dark mode can reduce eye strain, especially in low-light environments,
while light mode is
better for bright settings.
</p>
<button id="theme-toggle">Switch to Dark Mode</button>
<h2>Benefits of Dark/Light Mode</h2>
<ul>
<li>Improves accessibility for users with visual impairments.</li>
<li>Reduces eye strain during prolonged usage.</li>
<li>Personalizes the user experience.</li>
<li>Saves device battery life on OLED and AMOLED screens.</li>
</ul>
<p>
Learn more about web accessibility and user experience on the
<a href="https://www.w3.org/WAI/" target="_blank">
W3C Accessibility Guidelines</a>.
</p>
</div>
</body>
</html>
In this example
- The dark/light mode toggle provides a seamless transition with a 0.3s animation, reducing abrupt changes and improving readability.
- The contrast adjustments in dark and light modes help users with visual impairments while reducing eye strain in different lighting conditions.
- The centralized layout, responsive button, and clear typography ensure an intuitive and engaging experience for all users.
Implement Dark Mode in Websites - JavaScript code
This JavaScript enables dark/light mode toggling by dynamically switching classes and updating the button text using classList.replace().
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
body.classList.add('light-mode');
toggleButton.addEventListener('click', () => {
if (body.classList.contains('light-mode')) {
body.classList.replace('light-mode', 'dark-mode');
toggleButton.textContent = 'Switch to Light Mode';
} else {
body.classList.replace('dark-mode', 'light-mode');
toggleButton.textContent = 'Switch to Dark Mode';
}
});
In this example
- The script starts by selecting the toggle button and the body of the page.
- The light-mode class is added to the body to start with the light theme by default.
- An event listener is attached to the button to listen for clicks and toggle between light and dark modes.
- If the light-mode class is found on the body, it gets replaced with the dark-mode class, and the button text is updated accordingly.
- Similarly, when in dark mode, clicking the button switches back to light mode and updates the button text to reflect the change.
Complete code
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: background-color 0.3s, color 0.3s;
}
.container {
text-align: center;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
background-color: white;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
body.light-mode {
background-color: #f4f4f4;
color: #333;
}
body.dark-mode {
background-color: #333;
color: brown;
}
h1 {
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.6;
margin: 10px 0;
}
ul {
text-align: left;
padding-left: 20px;
margin-top: 20px;
}
li {
margin: 8px 0;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Dark/Light Mode Toggle</h1>
<p>
This page demonstrates a simple yet powerful way to switch between
<strong>dark</strong> and <strong>light</strong> modes for a better user experience.
</p>
<p>
Switching to dark mode can reduce eye strain, especially in low-light environments,
while light mode is better for bright settings.
</p>
<button id="theme-toggle">Switch to Dark Mode</button>
<h2>Benefits of Dark/Light Mode</h2>
<ul>
<li>Improves accessibility for users with visual impairments.</li>
<li>Reduces eye strain during prolonged usage.</li>
<li>Personalizes the user experience.</li>
<li>Saves device battery life on OLED and AMOLED screens.</li>
</ul>
<p>
Learn more about web accessibility and user experience on the
<a href="https://www.w3.org/WAI/" target="_blank">W3C Accessibility Guidelines</a>.
</p>
</div>
<script>
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
body.classList.add('light-mode');
toggleButton.addEventListener('click', () => {
if (body.classList.contains('light-mode')) {
body.classList.replace('light-mode', 'dark-mode');
toggleButton.textContent = 'Switch to Light Mode';
} else {
body.classList.replace('dark-mode', 'light-mode');
toggleButton.textContent = 'Switch to Dark Mode';
}
});
</script>
</body>
</html>
