Add styleSwitcher.

src/App.js

@@ -1,13 +1,15 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
+import StyleSwitcher from './components/style_switcher/style_switcher.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications
+    Notifications,
+    StyleSwitcher
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },

src/App.scss

@@ -58,6 +58,12 @@ nav {
     position: fixed;
     height: 50px;
 
+    .inner-nav {
+        display: flex;
+        align-items: center;
+        flex-basis: 920px;
+        margin: auto;
+    }
 }
 
 .sidebar {

src/App.vue

@@ -1,8 +1,11 @@
 <template>
   <div id="app" v-bind:style="style" class="base02-background">
     <nav class='container base01-background base04'>
-      <div class='item'>
-        <a route-to='friends-timeline' href="#">Pleroma FE</a>
+      <div class='inner-nav'>
+        <div class='item'>
+          <a route-to='friends-timeline' href="#">Pleroma FE</a>
+        </div>
+        <style-switcher></style-switcher>
       </div>
     </nav>
     <div class="container" id="content">

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)
+    }
+  }
+}

src/components/style_switcher/style_switcher.vue

@@ -0,0 +1,7 @@
+<template>
+  <select v-model="selected">
+    <option v-for="style in availableStyles" >{{style}}</option>
+  </select>
+</template>
+
+<script src="./style_switcher.js"></script>

src/main.js

@@ -61,4 +61,4 @@ new Vue({
   components: { App }
 })
 
-StyleSetter.setStyle('/static/css/solarized-light.css')
+StyleSetter.setStyle('/static/css/base16-solarized-light.css')