Implement Dark Mode in Websites Using HTML CSS & JavaScript

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.

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

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