How do you implement a dark mode using CSS?

Dark mode is implemented by defining CSS variables and toggling a class on the body element to change the values. For example, :root { --bg-color: white; --text-color: black; } .dark-mode { --bg-color: black; --text-color: white; } body { background-color: var(--bg-color); color: var(--text-color); } Switching between modes is done by adding or removing the dark-mode class from the body tag.