If you want your site to automatically switch between light and dark themes based on the visitor's system settings, you can use a @media query and the prefers-color-scheme feature.
@media (prefers-color-scheme: dark) { :root { --color-background: #333; --color-text: #eee; } }
body { color: var(--color-text); background-color: var(--color-background); }
Updated January 2, 2024 to use :root pseudo-class.