System DARK mode detection in browser

CSS detection

.box {
width: 100px;
height: 100px;
.system-color {
background-color: white;
@media (prefers-color-scheme: dark) {
.system-color {
background-color: black;
<link rel="stylesheet" href="./dark.css" media="(prefers-color-scheme: dark)">

Javascript detection

//return boolean
window.matchMedia('(prefers-color-scheme: dark)').matches
const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');

function handleSystemThemeChange(evt) {
if (evt.matches) {
console.log('dark mode');
} else {
console.log('light mode');
handleSystemThemeChange(mediaQueryList)// dark mode

// Add the callback function as a listener to the query list.



Only development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store