How to Add Dark Mode to Your Website | HTML, CSS, and JS Tutorial | Code with Beto

I'll teach you how to add Dark Mode to your website with HTML, CSS, and JavaScript. I show how to detect the OS preference and let users choose Light, Dark, or System. It is a practical way to improve visual comfort with a modern, customizable dark theme.

You will use CSS variables for semantic colors and theme styles, switch themes with an HTML selector and JavaScript, and respond automatically when the system theme changes.

What's inside

Introduction and theme picker demo (Light, Dark, System)
Initial project setup and file structure
CSS variables and media queries for Dark Mode
Semantic colors for Light and Dark themes
Theme selector for user choice
data-theme attribute on HTML for styling
JavaScript to switch themes and persist selection
Tips for a consistent experience

Introduction and theme picker demo (Light, Dark, System)

The demo lets you pick Light, Dark, or System. System follows the OS preference. Light and Dark override system settings.

Users get full control, or the site adapts automatically. The demo shows real-time theme changes clearly.

Initial project setup and file structure

We create a "Dark Mode tutorial" folder and open Visual Studio Code. Files include , a stylesheet, and for logic.

Browser Sync auto-reloads the browser on save. Separating styles and scripts keeps the project organized.

CSS variables and media queries for Dark Mode

Dark Mode starts in CSS with variables inside media queries. detects system dark or light mode.

Each block defines and variables. Dark Mode uses black background and white text; Light Mode reverses them. The site can follow the system without JavaScript.

Semantic colors for Light and Dark themes

Beyond background and text, we define semantic variables: , , , and . They stay recognizable in both themes with adjusted tones.

Warning stays orange and error red, tuned for light and dark backgrounds. That keeps the UI accessible and clear.

Theme selector for user choice

A offers Light, Dark, and System. Users can override system preference manually.

Default selection is Light.

data-theme attribute on HTML for styling

We set on to or . CSS selectors like apply the right variables.

JavaScript controls the theme dynamically instead of relying only on media queries.

JavaScript to switch themes and persist selection

listens for selector changes, updates on , and saves the choice in .

On load, saved preference applies. For System, we remove the attribute so CSS media queries take over. Themes persist across sessions.

Tips for a consistent experience

Some semantic colors stay the same across themes so meaning stays clear. CSS variables reduce duplication.

This approach works well for static sites and small projects. Larger apps might use frameworks or libraries, but this is a solid foundation.

Resources

CourseReact Native course

Learn to build mobile apps from scratch through App Store deployment.

Let's connect!