There are lot of solutions for detecting and/or switching dark mode on and off for WordPress, but nothing is more elegant that a simple CSS solution. With this, you can easily modify your theme look based on the system setting. With one caveat.

The solution here is to use the prefers-color-scheme CSS media feature. With this you can specify a set of CSS that will be applied, depending on the value you define for that feature. For example, this would apply when dark mode is switched on…

@media (prefers-color-scheme: dark) {

    [your CSS goes here]

}

You’d put this after your primary CSS and it would only cut in and override anything you define after the rest of the CSS has been actioned (the “cascading” part of it).

Pretty simple, yes? The prefers-color-scheme can be defined as light or dark too.

That caveat I mentioned? The light parameter refers to light mode OR if nothing has been defined (e.g. use of an OS that doesn’t have a dark mode setting defined). If your site’s CSS is for a light mode and you want to specify an override for dark mode then all of this is great. In the case of this site, which is dark by default, this is the wrong way around.