How to detect system dark mode in javascript?

The combination of Window.matchMedia() utility method along with media query is used to check if the user has selected a dark color scheme in their operating system settings or not. The CSS media query prefers-color-scheme needs to be passed to identify system color theme.

The following javascript code describes the usage,

const hasDarkColorScheme = () =>
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;

You can also watch changes to system color scheme using addEventListener,

window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
const theme = event.matches ? "dark" : "light";
});

Note: The matchMedia method returns MediaQueryList object stores information from a media query.