Detecting if the user preference is light or dark color theme is pretty easy with the prefers-color-scheme CSS media feature.

Detecting in JavaScript

const isDarkMode = window.matchMedia && 
  window.matchMedia('(prefers-color-scheme: dark)').matches;

Or maybe a more generic method:
javascript
const checkType = type => 
  window.matchMedia && 
  window.matchMedia(`(prefers-color-scheme: ${type})`).matches;

const mode = {
  is: {
    dark: checkType('dark'),
    light: checkType('light')
  }
};

mode.is.dark;  // true
mode.is.light; // false

matchMedia(query) returns a new MediaQueryList object with the parsed results of the specified media query string.

Detecting in CSS

/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: white;
  }
}

Note from the spec: User preferences can also vary by medium. For example, a user may prefer dark themes on a glowing screen, but light themes when printing. UAs are expected to take such variances into consideration.

Handling Preference Changes

window.matchMedia('(prefers-color-scheme: dark)')
  .addListener((e) => {
    const isDarkMode = e.matches;
    console.log(`${isDarkMode ? '🌚' : '🌞'}.`);
  });

## Force Setting Dark Mode
javascript
const forceDarkMode = () =>
  [...document.styleSheets[0].rules].forEach(rule => {
    const mediaText = rule.media && rule.media.mediaText || [];
    const hasColorScheme = mediaText.includes("prefers-color-scheme");
    const hasLightScheme = hasColorScheme && mediaText.includes("light");
    
    // Remove light mode if present
    if (hasLightScheme) {
      rule.media.deleteMedium("(prefers-color-scheme: light)");
    }
    
    // Append dark mode
    rule.media && rule.media.appendMedium("(prefers-color-scheme: dark)");
  });