<script>
export default {
  computed: {
    theme () {
      const [color, backgroundColor] =  this.$store.state.theme
      return {
        '--color': color,
        '--background-color': backgroundColor
      }
    }
  },
  
  methods: {
    // https://en.wikipedia.org/wiki/Vantablack
    vantaBlack () {
      let [color, backgroundColor] = this.$store.state.theme
      this.$store.commit('setTheme', [color, backgroundColor] = [backgroundColor, color])
    }
  }
}
</script>

<template>
  <div>
    <button @click="vantaBlack">{{ $store.state.theme[1] }}</button>
    <nuxt :style="theme" />
  </div>
</template>

<style>
#__nuxt {
  transition: all 250ms;
  background-color: rgb(var(--background-color));
  color: rgb(var(--color));
}
</style>
