Vantablack? Nuxt.js simple theme switch

default.vue

<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>

index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      theme: ['0, 0, 0', '255, 255, 255']
    }),

    mutations: {
      setTheme: (state, theme) => state.theme = theme
    }
  })
}

export default createStore

Tips

• For svg use fill="currentColor"
• Don't use HEX, use RGB value. You might need it for for alpha chanel e.g. rgba(var(--background), 0.5)
• Add slight transitions, don't hurt the eyes. Transitions works Out of the box. L32
• If you use Stylus and for any reason Stylus cannot accommodate a specific need, you can always resort to literal CSS with @css:

#__nuxt
  @css {
    background-color: rgb(var(--foreground));
    color: rgb(var(--background));
  }
  ...

The dark mode is currently only available on macOS Mojave via prefers-dark-interface CSS media query.

@media (prefers-dark-interface) {
  background-color: rgb(var(--background-color));
  color: rgb(var(--color));
}

In Safari Technology Preview Release 71 they announced a toggle switch in Safari to make testing easier. I also made a test page to see the browser behaviour.

If you have Safari Technology Preview Release 71 installed you can activate through:

Develop > Experimental Features > Dark Mode CSS Support

Then if you open the test page and open element inspector you have a new icon to toggle Dark/Light mode.