Custom CSS colors hack

HTML

<div id="app">
  <h1 class="primary secondary-bg">Hello!</h1>
  <label class="">Primary</label><input type="color" v-model="primary" @input="setColor"><br>
  <label class="">Secondary</label><input type="color" v-model="secondary" @input="setColor"><br><br>
  <a href="example.com">Maybe links should have the primary color too</a>
</div>

CSS

label{
  display:inline-block;
  width:80px
}

JavaScript

let style = document.createElement('style')
document.head.append(style)
new Vue({
	el:'#app',
  data(){
  	return {
    	primary:'#4fc08d',
      secondary:'#2973b7'
    }
  },
  methods:{
  	setColor(){
    	style.innerText = '.primary, a{color:' + this.primary + ';}.primary-bg{background:' + this.primary + ';}' +
      '.secondary{color:' + this.secondary + ';}.secondary-bg{background:' + this.secondary + ';}'
    }
  },
  created(){
  	this.setColor()
  }
})