Detect the user's preference
We can leverage the Window.matchMedia() API.
const osTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
You can also listen for changes on the match.
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
if (event.matches) {
//dark mode
} else {
//light mode
}
});