Globally available dark mode support in a Nuxt (Vue.js) app

const.js

/* store/const.js */
export const state = () => ({
  darkMode: false
});
export const mutations = {
  setDarkMode: state => {
    state.darkMode = true;
  },
  unsetDarkMode: state => {
    state.darkMode = false;
  }
};
export const actions = {
  setDarkMode: ({ commit }) => commit("setDarkMode"),
  unsetDarkMode: ({ commit, state }) => state.darkMode && commit("unsetDarkMode")
};

default.vue

/* layouts/default.vue */
<template>
 <nuxt />
</template>
<script>
export default {
  components: {
    AdminNav
  },
  data() {
    return {
      mql: window.matchMedia('(prefers-color-scheme: dark)')
    }
  },
  created() {
    this.darkMode(this.mql)
    this.mql.addListener(this.darkMode)
  },
  beforeDestroy() {
    this.mql.removeListener(this.darkMode)
  },
  methods: {
    darkMode: function(e) {
      if (e.matches) {
        return this.$store.dispatch('const/setDarkMode')
      }
      return this.$store.dispatch('const/unsetDarkMode')
    }
  }
}
</script>

myComponent.vue

/* components/myComponent.vue */
<template>
  <sui-button primary inverted="darkMode" icon="plus">New entity</sui-button>
</template>

<script>
export default {
  computed: {
    darkMode() {
      return this.$store.state.const.darkMode
    }
  }
};
</script>