Detect Dark Mode in Javascript & media query css

darkModeDetection.md

Detect Dark Mode in Javascript & Media Query CSS

Problem Context

Most operating systems have a setting to set the apps background to dark colors. This is done to reduce the eye strain. Web apps can detect the OS setting and adjust the application colors accordingly. This is an UX enhancement which we can showcase.

Solution

Javascript code to detect dark mode

/**
 * Should return true when dark mode enabled
 * Should return false when dark mode disabled
 * @returns {boolean}
 */
export const checkIfDarkModeEnabledOnClientDevice = () => {
    if (window && window.matchMedia) {
        return window.matchMedia('(prefers-color-scheme: dark)').matches
    }
    return false
}

Dark mode can be detected through media query, its easy and it does not need a page refresh.

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

To use it

@include dark-mode {
  background-color: $darkModeBackgroundColor;
  color: $textColorDarkMode;
}