Style Switcher 2 with VueJS

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<!-- set the root -->
<div id="root">
     <!-- widget for switching themes -->
    <div id="theme-switcher">
    <!-- using v-for to loop through array -->
    <!-- the template elemnts does not show up in the dom -->
    <template v-for="theme in themes">
    <!-- the v-for logic uses each item in the array to make a radio button -->
      <input :value="theme" :id="theme" name="theme-select" type="radio" v-model="selected"><label :for="theme">{{ theme }} </label>
      </template>
    </div>
    <!-- this is the markup that gets styled. -->
    <div id="output">
    <!-- this pulls the class from the "selected" variable. -->
       <div id="sample" :class="selected">
           <h1>
             Current Theme: {{ selected }}
           </h1>
           <p>
             Sample Text right here!
           </p>
           <button>
              Go
           </button>
       </div>
    </div>
</div>

CSS

body {
  font-family: Arial;
}
/* theme-switcher */
#theme-switcher {
  margin-bottom: 20px;
  border-radius: 30px;
}
#theme-switcher input[type="radio"] {
  display: none;
}
#theme-switcher 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 label:last-child {
  border-right: 0px;
}
#theme-switcher input[type="radio"]:checked+label {
  background-color: dodgerblue;
  color: white;
}
  
/* styles that relate to the theme switcher */
#sample {
  min-height: 130px;
  width: 100%;
}
h1 {
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  padding: 10px; 
}

p {
  margin: 0px;
  padding: 10px;
  font-size: 13px;
}
button {
  margin: 0px auto;
  display: block;
  border: 0px;
  padding: 8px;
  color:  #000;
  border-radius: 20px;
  cursor: pointer;
}
/* themes */
.dark {
  background-color: #062f4f;
  color: #fff;
  border: 1px solid #b82601;
  font-family: Arial;
}
.dark h1 {
  background-color: #813772;
}
.dark p {
  
}
.dark button {
  background-color: #b82601;
  color: #fff;
}
/* modern */
.modern {
  background-color: #efefef;
  font-family: Verdana;
  color: #606060;
}
.modern h1 {
  background-color: #caebf2;
}
.modern p {
}
.modern button {
  background-color: #ff3b3f;
  color: white;
}
/* light */
.light {
  background-color: rgba(246,246,246,1);
}
.light h1 {
  background-color: #67aeca;
  color: 
}
.light p {
  color: #5f0f4e;
}
button {
  background-color: #e52a6f;
  color: white;
}
/* gemstone */
.gemstone {
  font-family: 'Times New Roman';
  background-color: #efefef;
}
.gemstone h1 {
  background-color: #0f6571;
  color: #fff;
}
.gemstone p {
  color: #414141;
}
.gemstone button {
  background-color: #ff6a5c;
  color: #fff;
}

JavaScript

function init() {
  //define a new vue that grabs onto the root element.
  let vm = new Vue({
    el:'#root',
    data: {
      themes:['dark','modern','light','gemstone'],
      selected:''
    }
   });
   // set the default as the first element.
   vm.selected = vm.themes[0];
}
init();