3 files changed, 34 insertions, 1 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
new file mode 100644
index 00000000..8a8cc2a0
--- /dev/null
+++ b/src/components/style_switcher/style_switcher.js
@@ -0,0 +1,20 @@
+import StyleSetter from '../../services/style_setter/style_setter.js'
+
+export default {
+  data: () => ({
+    availableStyles: [],
+    selected: false
+  }),
+  created () {
+    const self = this
+    window.fetch('/static/css/themes.json')
+      .then((data) => data.json())
+      .then((themes) => { self.availableStyles = themes })
+  },
+  watch: {
+    selected () {
+      const fullPath = `/static/css/${this.selected}`
+      StyleSetter.setStyle(fullPath)
+    }
+  }
+}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
new file mode 100644
index 00000000..bfd8cf86
--- /dev/null
+++ b/src/components/style_switcher/style_switcher.vue
@@ -0,0 +1,13 @@
+<template>
+  <select v-model="selected" class="style-switcher">
+    <option v-for="style in availableStyles" >{{style}}</option>
+  </select>
+</template>
+
+<script src="./style_switcher.js"></script>
+
+<style lang="scss">
+ .style-switcher {
+   margin-right: 1em;
+ }
+</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index fb121e3c..9a21f404 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="panel-heading text-center" v-bind:style="style">
+    <div class="base00-background panel-heading text-center" v-bind:style="style">
       <div class='user-info'>
         <img :src="user.profile_image_url">
         <span class="glyphicon glyphicon-user"></span>