Add styleSwitcher.

src/App.js

 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

 <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

+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

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

static/css/base16-3024.css

+.base00-background { background-color: #090300; }
+.base01-background { background-color: #3a3432; }
+.base02-background { background-color: #4a4543; }
+.base03-background { background-color: #5c5855; }
+.base04-background { background-color: #807d7c; }
+.base05-background { background-color: #a5a2a2; }
+.base06-background { background-color: #d6d5d4; }
+.base07-background { background-color: #f7f7f7; }
+.base08-background { background-color: #db2d20; }
+.base09-background { background-color: #e8bbd0; }
+.base0A-background { background-color: #fded02; }
+.base0B-background { background-color: #01a252; }
+.base0C-background { background-color: #b5e4f4; }
+.base0D-background { background-color: #01a0e4; }
+.base0E-background { background-color: #a16a94; }
+.base0F-background { background-color: #cdab53; }
+
+.base00 { color: #090300; }
+.base01 { color: #3a3432; }
+.base02 { color: #4a4543; }
+.base03 { color: #5c5855; }
+.base04 { color: #807d7c; }
+.base05 { color: #a5a2a2; }
+.base06 { color: #d6d5d4; }
+.base07 { color: #f7f7f7; }
+.base08 { color: #db2d20; }
+.base09 { color: #e8bbd0; }
+.base0A { color: #fded02; }
+.base0B { color: #01a252; }
+.base0C { color: #b5e4f4; }
+.base0D { color: #01a0e4; }
+.base0E { color: #a16a94; }
+.base0F { color: #cdab53; }

static/css/base16-apathy.css

+.base00-background { background-color: #031A16; }
+.base01-background { background-color: #0B342D; }
+.base02-background { background-color: #184E45; }
+.base03-background { background-color: #2B685E; }
+.base04-background { background-color: #5F9C92; }
+.base05-background { background-color: #81B5AC; }
+.base06-background { background-color: #A7CEC8; }
+.base07-background { background-color: #D2E7E4; }
+.base08-background { background-color: #3E9688; }
+.base09-background { background-color: #3E7996; }
+.base0A-background { background-color: #3E4C96; }
+.base0B-background { background-color: #883E96; }
+.base0C-background { background-color: #963E4C; }
+.base0D-background { background-color: #96883E; }
+.base0E-background { background-color: #4C963E; }
+.base0F-background { background-color: #3E965B; }
+
+.base00 { color: #031A16; }
+.base01 { color: #0B342D; }
+.base02 { color: #184E45; }
+.base03 { color: #2B685E; }
+.base04 { color: #5F9C92; }
+.base05 { color: #81B5AC; }
+.base06 { color: #A7CEC8; }
+.base07 { color: #D2E7E4; }
+.base08 { color: #3E9688; }
+.base09 { color: #3E7996; }
+.base0A { color: #3E4C96; }
+.base0B { color: #883E96; }
+.base0C { color: #963E4C; }
+.base0D { color: #96883E; }
+.base0E { color: #4C963E; }
+.base0F { color: #3E965B; }

static/css/base16-ashes.css

+.base00-background { background-color: #1C2023; }
+.base01-background { background-color: #393F45; }
+.base02-background { background-color: #565E65; }
+.base03-background { background-color: #747C84; }
+.base04-background { background-color: #ADB3BA; }
+.base05-background { background-color: #C7CCD1; }
+.base06-background { background-color: #DFE2E5; }
+.base07-background { background-color: #F3F4F5; }
+.base08-background { background-color: #C7AE95; }
+.base09-background { background-color: #C7C795; }
+.base0A-background { background-color: #AEC795; }
+.base0B-background { background-color: #95C7AE; }
+.base0C-background { background-color: #95AEC7; }
+.base0D-background { background-color: #AE95C7; }
+.base0E-background { background-color: #C795AE; }
+.base0F-background { background-color: #C79595; }
+
+.base00 { color: #1C2023; }
+.base01 { color: #393F45; }
+.base02 { color: #565E65; }
+.base03 { color: #747C84; }
+.base04 { color: #ADB3BA; }
+.base05 { color: #C7CCD1; }
+.base06 { color: #DFE2E5; }
+.base07 { color: #F3F4F5; }
+.base08 { color: #C7AE95; }
+.base09 { color: #C7C795; }
+.base0A { color: #AEC795; }
+.base0B { color: #95C7AE; }
+.base0C { color: #95AEC7; }
+.base0D { color: #AE95C7; }
+.base0E { color: #C795AE; }
+.base0F { color: #C79595; }

static/css/base16-atelier-cave.css

+.base00-background { background-color: #19171c; }
+.base01-background { background-color: #26232a; }
+.base02-background { background-color: #585260; }
+.base03-background { background-color: #655f6d; }
+.base04-background { background-color: #7e7887; }
+.base05-background { background-color: #8b8792; }
+.base06-background { background-color: #e2dfe7; }
+.base07-background { background-color: #efecf4; }
+.base08-background { background-color: #be4678; }
+.base09-background { background-color: #aa573c; }
+.base0A-background { background-color: #a06e3b; }
+.base0B-background { background-color: #2a9292; }
+.base0C-background { background-color: #398bc6; }
+.base0D-background { background-color: #576ddb; }
+.base0E-background { background-color: #955ae7; }
+.base0F-background { background-color: #bf40bf; }
+
+.base00 { color: #19171c; }
+.base01 { color: #26232a; }
+.base02 { color: #585260; }
+.base03 { color: #655f6d; }
+.base04 { color: #7e7887; }
+.base05 { color: #8b8792; }
+.base06 { color: #e2dfe7; }
+.base07 { color: #efecf4; }
+.base08 { color: #be4678; }
+.base09 { color: #aa573c; }
+.base0A { color: #a06e3b; }
+.base0B { color: #2a9292; }
+.base0C { color: #398bc6; }
+.base0D { color: #576ddb; }
+.base0E { color: #955ae7; }
+.base0F { color: #bf40bf; }

static/css/base16-atelier-dune.css

+.base00-background { background-color: #20201d; }
+.base01-background { background-color: #292824; }
+.base02-background { background-color: #6e6b5e; }
+.base03-background { background-color: #7d7a68; }
+.base04-background { background-color: #999580; }
+.base05-background { background-color: #a6a28c; }
+.base06-background { background-color: #e8e4cf; }
+.base07-background { background-color: #fefbec; }
+.base08-background { background-color: #d73737; }
+.base09-background { background-color: #b65611; }
+.base0A-background { background-color: #ae9513; }
+.base0B-background { background-color: #60ac39; }
+.base0C-background { background-color: #1fad83; }
+.base0D-background { background-color: #6684e1; }
+.base0E-background { background-color: #b854d4; }
+.base0F-background { background-color: #d43552; }
+
+.base00 { color: #20201d; }
+.base01 { color: #292824; }
+.base02 { color: #6e6b5e; }
+.base03 { color: #7d7a68; }
+.base04 { color: #999580; }
+.base05 { color: #a6a28c; }
+.base06 { color: #e8e4cf; }
+.base07 { color: #fefbec; }
+.base08 { color: #d73737; }
+.base09 { color: #b65611; }
+.base0A { color: #ae9513; }
+.base0B { color: #60ac39; }
+.base0C { color: #1fad83; }
+.base0D { color: #6684e1; }
+.base0E { color: #b854d4; }
+.base0F { color: #d43552; }

static/css/base16-atelier-estuary.css

+.base00-background { background-color: #22221b; }
+.base01-background { background-color: #302f27; }
+.base02-background { background-color: #5f5e4e; }
+.base03-background { background-color: #6c6b5a; }
+.base04-background { background-color: #878573; }
+.base05-background { background-color: #929181; }
+.base06-background { background-color: #e7e6df; }
+.base07-background { background-color: #f4f3ec; }
+.base08-background { background-color: #ba6236; }
+.base09-background { background-color: #ae7313; }
+.base0A-background { background-color: #a5980d; }
+.base0B-background { background-color: #7d9726; }
+.base0C-background { background-color: #5b9d48; }
+.base0D-background { background-color: #36a166; }
+.base0E-background { background-color: #5f9182; }
+.base0F-background { background-color: #9d6c7c; }
+
+.base00 { color: #22221b; }
+.base01 { color: #302f27; }
+.base02 { color: #5f5e4e; }
+.base03 { color: #6c6b5a; }
+.base04 { color: #878573; }
+.base05 { color: #929181; }
+.base06 { color: #e7e6df; }
+.base07 { color: #f4f3ec; }
+.base08 { color: #ba6236; }
+.base09 { color: #ae7313; }
+.base0A { color: #a5980d; }
+.base0B { color: #7d9726; }
+.base0C { color: #5b9d48; }
+.base0D { color: #36a166; }
+.base0E { color: #5f9182; }
+.base0F { color: #9d6c7c; }

static/css/base16-atelier-forest.css

+.base00-background { background-color: #1b1918; }
+.base01-background { background-color: #2c2421; }
+.base02-background { background-color: #68615e; }
+.base03-background { background-color: #766e6b; }
+.base04-background { background-color: #9c9491; }
+.base05-background { background-color: #a8a19f; }
+.base06-background { background-color: #e6e2e0; }
+.base07-background { background-color: #f1efee; }
+.base08-background { background-color: #f22c40; }
+.base09-background { background-color: #df5320; }
+.base0A-background { background-color: #c38418; }
+.base0B-background { background-color: #7b9726; }
+.base0C-background { background-color: #3d97b8; }
+.base0D-background { background-color: #407ee7; }
+.base0E-background { background-color: #6666ea; }
+.base0F-background { background-color: #c33ff3; }
+
+.base00 { color: #1b1918; }
+.base01 { color: #2c2421; }
+.base02 { color: #68615e; }
+.base03 { color: #766e6b; }
+.base04 { color: #9c9491; }
+.base05 { color: #a8a19f; }
+.base06 { color: #e6e2e0; }
+.base07 { color: #f1efee; }
+.base08 { color: #f22c40; }
+.base09 { color: #df5320; }
+.base0A { color: #c38418; }
+.base0B { color: #7b9726; }
+.base0C { color: #3d97b8; }
+.base0D { color: #407ee7; }
+.base0E { color: #6666ea; }
+.base0F { color: #c33ff3; }

static/css/base16-atelier-heath.css

+.base00-background { background-color: #1b181b; }
+.base01-background { background-color: #292329; }
+.base02-background { background-color: #695d69; }
+.base03-background { background-color: #776977; }
+.base04-background { background-color: #9e8f9e; }
+.base05-background { background-color: #ab9bab; }
+.base06-background { background-color: #d8cad8; }
+.base07-background { background-color: #f7f3f7; }
+.base08-background { background-color: #ca402b; }
+.base09-background { background-color: #a65926; }
+.base0A-background { background-color: #bb8a35; }
+.base0B-background { background-color: #918b3b; }
+.base0C-background { background-color: #159393; }
+.base0D-background { background-color: #516aec; }
+.base0E-background { background-color: #7b59c0; }
+.base0F-background { background-color: #cc33cc; }
+
+.base00 { color: #1b181b; }
+.base01 { color: #292329; }
+.base02 { color: #695d69; }
+.base03 { color: #776977; }
+.base04 { color: #9e8f9e; }
+.base05 { color: #ab9bab; }
+.base06 { color: #d8cad8; }
+.base07 { color: #f7f3f7; }
+.base08 { color: #ca402b; }
+.base09 { color: #a65926; }
+.base0A { color: #bb8a35; }
+.base0B { color: #918b3b; }
+.base0C { color: #159393; }
+.base0D { color: #516aec; }
+.base0E { color: #7b59c0; }
+.base0F { color: #cc33cc; }

static/css/base16-atelier-lakeside.css

+.base00-background { background-color: #161b1d; }
+.base01-background { background-color: #1f292e; }
+.base02-background { background-color: #516d7b; }
+.base03-background { background-color: #5a7b8c; }
+.base04-background { background-color: #7195a8; }
+.base05-background { background-color: #7ea2b4; }
+.base06-background { background-color: #c1e4f6; }
+.base07-background { background-color: #ebf8ff; }
+.base08-background { background-color: #d22d72; }
+.base09-background { background-color: #935c25; }
+.base0A-background { background-color: #8a8a0f; }
+.base0B-background { background-color: #568c3b; }
+.base0C-background { background-color: #2d8f6f; }
+.base0D-background { background-color: #257fad; }
+.base0E-background { background-color: #6b6bb8; }
+.base0F-background { background-color: #b72dd2; }
+
+.base00 { color: #161b1d; }
+.base01 { color: #1f292e; }
+.base02 { color: #516d7b; }
+.base03 { color: #5a7b8c; }
+.base04 { color: #7195a8; }
+.base05 { color: #7ea2b4; }
+.base06 { color: #c1e4f6; }
+.base07 { color: #ebf8ff; }
+.base08 { color: #d22d72; }
+.base09 { color: #935c25; }
+.base0A { color: #8a8a0f; }
+.base0B { color: #568c3b; }
+.base0C { color: #2d8f6f; }
+.base0D { color: #257fad; }
+.base0E { color: #6b6bb8; }
+.base0F { color: #b72dd2; }

static/css/base16-atelier-plateau.css

+.base00-background { background-color: #1b1818; }
+.base01-background { background-color: #292424; }
+.base02-background { background-color: #585050; }
+.base03-background { background-color: #655d5d; }
+.base04-background { background-color: #7e7777; }
+.base05-background { background-color: #8a8585; }
+.base06-background { background-color: #e7dfdf; }
+.base07-background { background-color: #f4ecec; }
+.base08-background { background-color: #ca4949; }
+.base09-background { background-color: #b45a3c; }
+.base0A-background { background-color: #a06e3b; }
+.base0B-background { background-color: #4b8b8b; }
+.base0C-background { background-color: #5485b6; }
+.base0D-background { background-color: #7272ca; }
+.base0E-background { background-color: #8464c4; }
+.base0F-background { background-color: #bd5187; }
+
+.base00 { color: #1b1818; }
+.base01 { color: #292424; }
+.base02 { color: #585050; }
+.base03 { color: #655d5d; }
+.base04 { color: #7e7777; }
+.base05 { color: #8a8585; }
+.base06 { color: #e7dfdf; }
+.base07 { color: #f4ecec; }
+.base08 { color: #ca4949; }
+.base09 { color: #b45a3c; }
+.base0A { color: #a06e3b; }
+.base0B { color: #4b8b8b; }
+.base0C { color: #5485b6; }
+.base0D { color: #7272ca; }
+.base0E { color: #8464c4; }
+.base0F { color: #bd5187; }

static/css/base16-atelier-savanna.css

+.base00-background { background-color: #171c19; }
+.base01-background { background-color: #232a25; }
+.base02-background { background-color: #526057; }
+.base03-background { background-color: #5f6d64; }
+.base04-background { background-color: #78877d; }
+.base05-background { background-color: #87928a; }
+.base06-background { background-color: #dfe7e2; }
+.base07-background { background-color: #ecf4ee; }
+.base08-background { background-color: #b16139; }
+.base09-background { background-color: #9f713c; }
+.base0A-background { background-color: #a07e3b; }
+.base0B-background { background-color: #489963; }
+.base0C-background { background-color: #1c9aa0; }
+.base0D-background { background-color: #478c90; }
+.base0E-background { background-color: #55859b; }
+.base0F-background { background-color: #867469; }
+
+.base00 { color: #171c19; }
+.base01 { color: #232a25; }
+.base02 { color: #526057; }
+.base03 { color: #5f6d64; }
+.base04 { color: #78877d; }
+.base05 { color: #87928a; }
+.base06 { color: #dfe7e2; }
+.base07 { color: #ecf4ee; }
+.base08 { color: #b16139; }
+.base09 { color: #9f713c; }
+.base0A { color: #a07e3b; }
+.base0B { color: #489963; }
+.base0C { color: #1c9aa0; }
+.base0D { color: #478c90; }
+.base0E { color: #55859b; }
+.base0F { color: #867469; }

static/css/base16-atelier-seaside.css

+.base00-background { background-color: #131513; }
+.base01-background { background-color: #242924; }
+.base02-background { background-color: #5e6e5e; }
+.base03-background { background-color: #687d68; }
+.base04-background { background-color: #809980; }
+.base05-background { background-color: #8ca68c; }
+.base06-background { background-color: #cfe8cf; }
+.base07-background { background-color: #f4fbf4; }
+.base08-background { background-color: #e6193c; }
+.base09-background { background-color: #87711d; }
+.base0A-background { background-color: #98981b; }
+.base0B-background { background-color: #29a329; }
+.base0C-background { background-color: #1999b3; }
+.base0D-background { background-color: #3d62f5; }
+.base0E-background { background-color: #ad2bee; }
+.base0F-background { background-color: #e619c3; }
+
+.base00 { color: #131513; }
+.base01 { color: #242924; }
+.base02 { color: #5e6e5e; }
+.base03 { color: #687d68; }
+.base04 { color: #809980; }
+.base05 { color: #8ca68c; }
+.base06 { color: #cfe8cf; }
+.base07 { color: #f4fbf4; }
+.base08 { color: #e6193c; }
+.base09 { color: #87711d; }
+.base0A { color: #98981b; }
+.base0B { color: #29a329; }
+.base0C { color: #1999b3; }
+.base0D { color: #3d62f5; }
+.base0E { color: #ad2bee; }
+.base0F { color: #e619c3; }

static/css/base16-atelier-sulphurpool.css

+.base00-background { background-color: #202746; }
+.base01-background { background-color: #293256; }
+.base02-background { background-color: #5e6687; }
+.base03-background { background-color: #6b7394; }
+.base04-background { background-color: #898ea4; }
+.base05-background { background-color: #979db4; }
+.base06-background { background-color: #dfe2f1; }
+.base07-background { background-color: #f5f7ff; }
+.base08-background { background-color: #c94922; }
+.base09-background { background-color: #c76b29; }
+.base0A-background { background-color: #c08b30; }
+.base0B-background { background-color: #ac9739; }
+.base0C-background { background-color: #22a2c9; }
+.base0D-background { background-color: #3d8fd1; }
+.base0E-background { background-color: #6679cc; }
+.base0F-background { background-color: #9c637a; }
+
+.base00 { color: #202746; }
+.base01 { color: #293256; }
+.base02 { color: #5e6687; }
+.base03 { color: #6b7394; }
+.base04 { color: #898ea4; }
+.base05 { color: #979db4; }
+.base06 { color: #dfe2f1; }
+.base07 { color: #f5f7ff; }
+.base08 { color: #c94922; }
+.base09 { color: #c76b29; }
+.base0A { color: #c08b30; }
+.base0B { color: #ac9739; }
+.base0C { color: #22a2c9; }
+.base0D { color: #3d8fd1; }
+.base0E { color: #6679cc; }
+.base0F { color: #9c637a; }

static/css/base16-bespin.css

+.base00-background { background-color: #28211c; }
+.base01-background { background-color: #36312e; }
+.base02-background { background-color: #5e5d5c; }
+.base03-background { background-color: #666666; }
+.base04-background { background-color: #797977; }
+.base05-background { background-color: #8a8986; }
+.base06-background { background-color: #9d9b97; }
+.base07-background { background-color: #baae9e; }
+.base08-background { background-color: #cf6a4c; }
+.base09-background { background-color: #cf7d34; }
+.base0A-background { background-color: #f9ee98; }
+.base0B-background { background-color: #54be0d; }
+.base0C-background { background-color: #afc4db; }
+.base0D-background { background-color: #5ea6ea; }
+.base0E-background { background-color: #9b859d; }
+.base0F-background { background-color: #937121; }
+
+.base00 { color: #28211c; }
+.base01 { color: #36312e; }
+.base02 { color: #5e5d5c; }
+.base03 { color: #666666; }
+.base04 { color: #797977; }
+.base05 { color: #8a8986; }
+.base06 { color: #9d9b97; }
+.base07 { color: #baae9e; }
+.base08 { color: #cf6a4c; }
+.base09 { color: #cf7d34; }
+.base0A { color: #f9ee98; }
+.base0B { color: #54be0d; }
+.base0C { color: #afc4db; }
+.base0D { color: #5ea6ea; }
+.base0E { color: #9b859d; }
+.base0F { color: #937121; }