Vue

by WoJWoJ

HTML

<div id="app" :style="colors">
  <div id="square" >{{switchme}}</div>
  <button @click="switchme=!switchme">switchme</button>
</div>

CSS

#square {
  background-color: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
}

Vue

const dark = {
          '--fg': 'green',
          '--bg': 'red'
        }
const light = {

        	 '--fg': 'blue',
          '--bg': 'yellow'
        
}

new Vue({
  el: "#app",
  data: {
    switchme: true
  },
  computed: {
    colors() {
      if (this.switchme) {
        return dark
      } else {
      	return light
      }
    }
  }
})