Layout: now user can change theme

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :class="theme">
     <Navbar></Navbar>
     <div class="main">
       <Message />
@@ -16,19 +16,26 @@
 
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
   import * as layout from '@/components/layout'
   export default {
     components: {
       ...layout
     },
     computed: {
-      ...mapGetters(['isLogin'])
+      ...mapGetters(['isLogin', 'theme'])
     },
     created () {
       this.checkLogin()
     },
+    mounted () {
+      const themeFromCookie = this.$cookie.get('theme')
+      if (themeFromCookie) {
+        this.setTheme(themeFromCookie)
+      }
+    },
     methods: {
+      ...mapActions(['setTheme']),
       checkLogin () {
         if (!this.isLogin && this.$route.name !== 'Registe') this.$router.push('/login')
       }

src/assets/scss/_color.scss

@@ -1,12 +1,16 @@
-$tone: #009999;
+$cyan: #009999;
 $white: #ffffff;
 $black: #282828;
+$dark: #333;
 $skin: #D2CAC7;
 $skin_dark: #87827F;
 $gray: #757575;
 $red: #F7615C;
 $yellow: #FABD40;
 $green: #3BC74A;
+$blue: #398FEF;
 $gold: #BEB5A9;
 $light: #F8F8F8;
-$content: #3d3d3d;
+$content: #3d3d3d;
+
+$tone: $cyan;

src/assets/scss/_login.scss

@@ -10,6 +10,9 @@
     box-shadow: 1pt 1pt 2pt rgba($black, .5);
     display: flex;
     flex-direction: column;
+    input {
+      background: transparent;
+    }
     * {
       letter-spacing: 0;
     }

src/assets/scss/_plugin.scss

@@ -124,6 +124,10 @@
   &.user {
     width: 400px;
 
+    input {
+      background: transparent;
+    }
+
     header {
       margin-bottom: 2rem;
 
@@ -136,6 +140,10 @@
       }
     }
 
+    h2 {
+      margin: 1rem 0;
+    }
+
     .user-config {
       >.input-box {
         margin: 25pt 0;
@@ -438,9 +446,11 @@
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -484,3 +494,41 @@
     background-color: $green;
   }
 }
+
+.theme {
+  &-picker {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 1rem;
+  color: $tone;
+  cursor: pointer;
+
+  p {
+    color: $content;
+    text-align: center;
+  }
+
+  .box {
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    transform: rotate(135deg);
+    .back {
+      height: 1rem;
+      width: 2rem;
+      position: absolute;
+      border-radius: 0;
+      border-top-left-radius: 2rem;
+      border-top-right-radius: 2rem;
+      top: 0;
+    }
+  }
+
+}

src/assets/scss/main.scss

@@ -15,6 +15,8 @@
 @import 'analystic';
 @import 'server';
 
+@import 'theme/index';
+
 #app {
   overflow-x: hidden;
   width: 100%;
@@ -39,4 +41,24 @@
       min-height: inherit;
     }
   }
+
+  &.meibo-light-red {
+    @include meibo-light($tone: $red);
+  }
+
+  &.meibo-dark-green {
+    @include meibo-dark($tone: $cyan);
+  }
+
+  &.meibo-dark-blue {
+    @include meibo-dark($tone: $blue);
+  }
+
+  &.meibo-dark-red {
+    @include meibo-dark($tone: $red);
+  }
+
+  &.meibo-dark-yellow {
+    @include meibo-dark($tone: $yellow);
+  }
 }

src/assets/scss/theme/index.scss

@@ -0,0 +1,2 @@
+@import 'meibo-light';
+@import 'meibo-dark';

src/assets/scss/theme/meibo-dark.scss

@@ -0,0 +1,160 @@
+@mixin meibo-dark ($tone) {
+  background-color: $black;
+  color: $white;
+
+  .button {
+    background-color: $tone;
+  }
+
+  input {
+    color: $white;
+  }
+
+  .switch {
+    .slider {
+
+      &,
+      &:before {
+        background-color: $tone;
+      }
+    }
+  }
+
+  .editor-container.paragraph {
+    color: $content;
+
+    h2 {
+      &:before {
+        color: $tone;
+      }
+    }
+  }
+
+  .datepicker-inputbox,
+  .datepicker-main-wrapper {
+    color: $tone;
+    border-color: $tone;
+
+    input {
+      color: $tone;
+      text-shadow: 0 0 0 $tone;
+    }
+
+    .datepicker-month-name {
+      background-color: $tone;
+    }
+
+    .datepicker-table-cal.datepicker-day {
+
+      &:hover,
+      &.active {
+        background-color: $tone;
+      }
+    }
+  }
+
+  .input-box {
+    color: $tone;
+
+    .bar {
+
+      &:before,
+      &:after {
+        background: $tone;
+      }
+    }
+  }
+
+  .navbar {
+    background-color: $tone;
+
+    .version {
+      color: $tone;
+    }
+  }
+
+  .container {
+    box-shadow: 1pt 1pt 3pt rgba($black, .7);
+  }
+
+  .footer {
+    color: $white;
+  }
+
+  .list {
+
+    &.head {
+      background-color: $tone;
+    }
+
+    .action {
+      p:hover {
+        color: $tone;
+      }
+    }
+
+    background-color: $dark;
+  }
+
+  #login {
+    .container {
+      background-color: $dark;
+    }
+  }
+
+  .server-list .container {
+    background-color: $dark;
+  }
+
+  .sidebar {
+    color: $white;
+
+    ul li a {
+
+      &:hover,
+      &.active {
+        color: $tone;
+      }
+    }
+  }
+
+  .loader {
+    svg.circular {
+      .path {
+        stroke: $tone;
+      }
+    }
+  }
+
+  .todos {
+    &.indent-1 {
+      background-color: $tone;
+    }
+
+    &.indent-2 {
+      background-color: $dark;
+
+      .checkbox {
+        color: $tone;
+      }
+    }
+
+    box-shadow: 1pt 1pt 3pt rgba($black, .7);
+  }
+
+  .editor-container.user {
+    background-color: $dark;
+
+    input {
+      color: $white;
+    }
+  }
+
+  .theme {
+    color: $tone;
+    p {
+      color: $white;
+    }
+  }
+
+}