Theme Switcher with Objects

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<!-- set the root-final -->
<div id="root-final">
     <!-- widget for switching themes -->
    <div id="theme-switcher-final">
    <!-- using v-for to loop through array -->
    <!-- the template elemnts does not show up in the dom -->
    <template v-for="(theme,i) in themes">
    <!-- the v-for logic uses each item in the array to make a radio button -->
       
           <input :id="theme.id" v-model="selected" :value="theme.label" name="style-options" type="radio"><label :for="theme.id"><span v-html="theme.label"></span></label></template>
    </div>
    <!-- this is the markup that gets styled. -->
    <!-- this pulls the class from the "selected" variable. -->
    
       <div id="output-final" :class="selected">
           <h1>
             Current Theme: <span v-html="selected"></span>
           </h1>
           <p>
             Sample text is right here. The theme switcher is powered by VueJS.
           </p>
           <button v-on:click="hello">
              Go
           </button>
       </div>

</div>

CSS

body {
  font-family: Arial;
}
/* theme-switcher */
/* hide the radio button element */
#theme-switcher-final input[type="radio"] {
  display: none;
}
/* style the label */
#theme-switcher-final label {
  padding: 10px;
  background-color: lightgrey;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  margin-top: 0px;
  min-width: 50px;
  border-right: 1px solid darkgrey;
}
#theme-switcher-final label:last-child {
  border-right: 0px;
}
#theme-switcher-final input[type="radio"]:checked+label {
  background-color: dodgerblue;
  color: white;
}
  
/* styles that relate to the theme switcher */
#output-final {
  min-height: 130px;
  width: 100%;
}
#root-final h1 {
  font-size: 14px;
  margin: 0px;
  padding: 10px; 
  font-weight: 700;
}
#root-final p {
  margin: 0px;
  padding: 10px;
  font-size: 13px;
}
#root-final button {
  margin: 0px auto;
  display: block;
  border: 0px;
  padding: 8px;
  color:  #000;
  border-radius: 20px;
  cursor: pointer;
}
/* themes */
#root-final .dark {
  background-color: #062f4f;
  color: #fff;
  border: 1px solid #b82601;
  font-family: Arial;
}
#root-final .dark h1 {
  background-color: #813772;
}

#root-final .dark button {
  background-color: #b82601;
  color: #fff;
}
/* modern */
#root-final .modern {
  background-color: #efefef;
  font-family: Verdana;
  color: #606060;
}
#root-final .modern h1 {
  background-color: #caebf2;
}

#root-final .modern button {
  background-color: #ff3b3f;
  color: white;
}
/* light */
#root-final .light {
  background-color: rgba(246,246,246,1);
}
#root-final .light h1 {
  background-color: #67aeca;
  color: 
}
#root-final .light p {
  color: #5f0f4e;
}
#root-final button {
  background-color: #e52a6f;
  color: white;
}
/* gemstone */
#root-final .gemstone {
  background-color: #efefef;
}
#root-final .gemstone h1 {
  background-color: #0f6571;
  color: #fff;
}
#root-final .gemstone p {
  color: #414141;
}
#root-final .gemstone button {
  background-color: #ff6a5c;
  color: #fff;
}

JavaScript

let vm_final = new Vue({
    el:'#root-final',
    data: {
      themes:[
      {
        id:'darkl',
        label:'dark',
      },
      {
        id:'modern-final',
        label:'modern',
      },
      {
        id:'light-final',
        label:'light',
      },
      {
        id:'gemstone-final',
        label:'gemstone'
      }
      ],
      selected:''
    },
    methods: {
      hello:function() {
        alert('hello, world!')
      }
    }
   });
   // set the default as the first element.
   vm_final.selected = vm_final.themes[0].label