Detect Preferred Color Scheme 🐛️ 🔍️ 👀️

A micro ES6 module (~0.5KB) for detecting a users preferred-color-scheme and watching for changes.

Installation

npm install @egstad/detect-theme

Usage

import theme from '@egstad/detect-theme'

// watch for `colorSchemeUpdated` events
window.addEventListener('colorSchemeUpdated', (e) => {
  switch (e.detail.theme) {
    case 'dark':
      // dark theme code here...
      break;
    case 'light':
      // light theme code here...
      break;
    default:
      // user has no preference
      break;
  }
})


// 1. fetch preferred theme
// 2. dispatch result via 'colorSchemeUpdated'
// 3. watch for changes
theme.watch()

Methods

The watch() method is more than likely all you'll need. Here's a list of what each method in the module does.

// 1. fetch preferred theme
// 2. dispatch result via 'colorSchemeUpdated'
theme.get()

// 1. runs `get()`
// 2. adds `colorSchemeUpdated` event listener to window
theme.watch()

// removes `colorSchemeUpdated` event listener from window
theme.destroy()

Example

Here is a screencap demonstrating the realtime updates on Mac OS (System Preferences > General > Appearance).

Example: Editing CSS Variables on colorSchemeUpdated

window.addEventListener('colorSchemeUpdated', (e) => {
  switch (e.detail.theme) {
    case 'dark':
      // dark theme
      root.style.setProperty('--background', 'black');
      root.style.setProperty('--foreground', 'white');
      break;
    case 'light':
      // light theme
      root.style.setProperty('--background', 'white');
      root.style.setProperty('--foreground', 'black');
      break;
    default:
      // user has no preference
      root.style.setProperty('--background', '#D11D05');
      root.style.setProperty('--foreground', '#D1E5E1');
      break;
  }
})