Napolean Paced Mischeviously

    @egstad/detect-theme

    1.4.0 • Public • Published

    Detect Preferred Color Scheme 🐛️ 🔍️ 👀️

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

    Coverage:statements Coverage:functions Coverage:lines License: MIT

    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 of changing Preferred Color Scheme on Mac OS

    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;
      }
    })

    Install

    npm i @egstad/detect-theme

    DownloadsWeekly Downloads

    5

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    1.76 MB

    Total Files

    24

    Last publish

    Collaborators

    • egstad