Vue 2.x plugin to detect dark mode and make a reactive property describing the current mode available to all components of your app

VueDarkMode.js

export default function Plugin(Vue) {  
  /**
  Installing in your app root: 
  
  import DarkMode from './path/to/this/code.js';
  Vue.use(DarkMode);
  
  Usage in your components: 
  
  <div v-if="$darkMode.isDark">...</div>
  
  -or-
  
  if(this.$darkMode.isDark) {
    ...
  }
  */
  
  // an object to encapsulate observate state and the update method
  const darkMode = {
    // make it reactive!
    state: Vue.observable({
      // default mode is light
      isDark: false,
      isLight: true
    }),
    update(event) {
       // mutate the observable props
      if (event.matches) {
        darkMode.state.isDark = true;
        darkMode.state.isLight = false;
      } else {
        darkMode.state.isDark = false;
        darkMode.state.isLight = true;
      }
    }
  }

  // only bother checking for dark mode if the browser supports it. 
  if (window.matchMedia) {
    // the media query to match
    const darkQuery = '(prefers-color-scheme: dark)';
    
    darkMode.update(window.matchMedia(darkQuery));
    window.matchMedia(darkQuery)
      .addEventListener('change', darkMode.update);
  }
  
  // expose just the observable props the app's components
  Vue.prototype.$darkMode = darkMode.state;
}