Implement Dark Mode in Websites Using HTML CSS & JavaScript (original) (raw)

Last Updated : 06 Feb, 2025

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

How to Make Dark Mode for Websites using HTML CSS & JavaScript ?

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 `

`

**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().

JavaScript `

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 `