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

Most dark mode tutorials stop at a toggle. The version users actually expect has three options: Light, Dark, and System, where System follows the OS automatically. That's what we build here with plain HTML, CSS, and JavaScript, no framework required. I code the whole thing in the video, including the part most people miss: persisting the choice across sessions.

What's inside

• Detect the OS theme with prefers-color-scheme, no JavaScript needed
• Define light and dark palettes with CSS variables
• Semantic colors (success, warning, error) that stay readable in both themes
• A theme picker that lets users override the system setting
• Switch themes via a data-theme attribute on the html element
• Save the preference in localStorage so it survives reloads

Resources

CourseReact with TypeScript course

Take these theming fundamentals into React and build polished, component-based UIs.