Use a media query to set different values for variables in dark-mode. :root { --background-color: #eee; --text-color: #222; } @media (prefers-color-scheme: dark) { :root { --background-color: #222; --text-color: #eee; } } body { background-color: var(--background-color); color: var(--text-color); }