How can I change the page color using radio buttons and Vue.js?

Issue

I want to make an option to change the page color using radio buttons with vuejs

So far I have this

JavaScript

var theme = new Vue({
    el: '#theme',
    data: {
        picked: ''
    }
})

HTML

<div id="theme">
<span>Chose the color theme you want</span>        
<br>   
<input type="radio" id="dark" value="Dark" v-model="picked">
<label for="dark">Dark</label>
<br>
<input type="radio" id="light" value="Light" v-model="picked">
<label for="light">Light</label>
<br>
<span>Picked: {{ picked }}</span>
</div>

Solution

You can combine watch and CSS variables.

var theme = new Vue({
  el: '#theme',
  data: {
    picked: ''
  },
  watch: {
    picked: function(val) {

      if (val == 'Dark') {
        document.documentElement.style.setProperty("--bg", "#000");
        document.documentElement.style.setProperty("--color", "#fff");
      } else if (val == 'Light') {
        document.documentElement.style.setProperty("--bg", "#fff");
        document.documentElement.style.setProperty("--color", "#000");
      }

    },
  }
})

html {
  --bg: pink;
  --color: #000;
}

body {
  background: var(--bg);
  color: var(--color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="theme">
  <span>Chose the color theme you want</span>
  <br>
  <input type="radio" id="dark" value="Dark" v-model="picked">
  <label for="dark">Dark</label>
  <br>
  <input type="radio" id="light" value="Light" v-model="picked">
  <label for="light">Light</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

Answered By - doğukan