Auto Dark Mode with CSS @media Query prefers-color-scheme
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.
:root {
--color-background: #eee;
--color-text: #000;
}
@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.