How to Create a Dark and Light Mode Toggle Using HTML, CSS, and JavaScript (Step-by-Step Guide).

Creating Dark theme and Light theme in HTML + CSS is a very common feature in modern websites. It allows users to switch between light mode and dark mode.
Basic Light and Dark Theme using CSS Variables

HTML

CSS

JavaScript

Output - Light Theme

Output - Dark Theme

How it works

1. CSS Variables define colors.
2. Default theme - Light mode.
3. When button clicked - dark theme class added.
4. Variables change automatically.