Is it possible to remove a prefers-color-scheme event listener in Vue?

Question

I try to do something very simple, but somehow it doesn't work. When a component gets remove I want to remove the evenListener, but somehow this doesn't work. Could anybody point me in the right direction?

Here is a simplified version of my component:

<template>
  <child-component :dark="darkModeEnabled" />
</template>

<script>
export default {
  data () {
    return {
      darkModeEnabled: window.matchMedia('(prefers-color-scheme: dark)').matches
    }
  },
  mounted () {
    this.$nextTick(() => {
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.setDarkMode)
    })
  },
  beforeDestroy () {
    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.setDarkMode)
  },
  methods: {
    setDarkMode ({ matches }) {
      this.darkModeEnabled = matches
    }
  }
}
</script>```

Answer 1

Your code is not working because you are adding and removing in different MediaQueryList objects.

...
  mounted () {
    this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
    this.$nextTick(() => {
      this.mediaQueryList.addEventListener('change', this.setDarkMode)
    })
  },

  beforeDestroy () {
    this.mediaQueryList.removeEventListener('change', this.setDarkMode)
  }
...

JSFiddle