How to build a Dark mode toggle

Build a practical Dark mode toggle component with accessible markup, responsive CSS, JavaScript behavior and a React version.

Dark mode toggle demo
lesson.html
1
2
3
4
5
html5 linesWrap
Preview

Terminal

Success

Ready.

Run code to see output here.

CSS code

:root { --surface: #ffffff; --text: #0f172a; }
[data-theme="dark"] { --surface: #111827; --text: #f8fafc; }
.panel { background: var(--surface); color: var(--text); }

React version

function LessonList() {
  const topics = ["Dark mode toggle", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}