feat: Color Theme page logic

client/js/components/color-picker.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
   .colorpicker
-    .colorpicker-choice(v-for='color in colors', :class='["is-" + color, color === currentColor ? "is-active" : ""]', @click='setColor(color)')
+    .colorpicker-choice(v-for='color in colors', :class='["is-" + color, color === value ? "is-active" : ""]', @click='setColor(color)')
 </template>
 
 <script>
   export default {
     name: 'color-picker',
-    props: ['currentColor'],
+    props: ['value'],
     data () {
       return {
         colors: [
@@ -34,7 +34,7 @@
     },
     methods: {
       setColor(color) {
-        this.currentColor = color
+        this.$emit('input', color)
       }
     }
   }

client/js/components/toggle.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .toggle(:class='{ "is-active": currentValue }', @click='changeToggle')
+  .toggle(:class='{ "is-active": value }', @click='changeToggle')
     .toggle-container
       .toggle-pin
     .toggle-text {{ desc }}
@@ -8,13 +8,13 @@
 <script>
   export default {
     name: 'toggle',
-    props: ['currentValue', 'desc'],
+    props: ['value', 'desc'],
     data () {
       return { }
     },
     methods: {
       changeToggle() {
-        this.currentValue = !this.currentValue
+        this.$emit('input', !this.value)
       }
     }
   }