diff --git a/src/App.vue b/src/App.vue
index 7f0a77f..c619d54 100644
--- a/src/App.vue
+++ b/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')
       }
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 70d5d91..e84885c 100644
--- a/src/assets/scss/_color.scss
+++ b/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;
\ No newline at end of file
+$content: #3d3d3d;
+
+$tone: $cyan;
\ No newline at end of file
diff --git a/src/assets/scss/_login.scss b/src/assets/scss/_login.scss
index 87c0dfd..df5d664 100644
--- a/src/assets/scss/_login.scss
+++ b/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;
     }
diff --git a/src/assets/scss/_plugin.scss b/src/assets/scss/_plugin.scss
index 2ecc7b5..9228df2 100644
--- a/src/assets/scss/_plugin.scss
+++ b/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;
+    }
+  }
+
+}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 33b8672..f671fd9 100644
--- a/src/assets/scss/main.scss
+++ b/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);
+  }
 }
diff --git a/src/assets/scss/theme/index.scss b/src/assets/scss/theme/index.scss
new file mode 100644
index 0000000..1c01bfd
--- /dev/null
+++ b/src/assets/scss/theme/index.scss
@@ -0,0 +1,2 @@
+@import 'meibo-light';
+@import 'meibo-dark';
diff --git a/src/assets/scss/theme/meibo-dark.scss b/src/assets/scss/theme/meibo-dark.scss
new file mode 100644
index 0000000..2d48d58
--- /dev/null
+++ b/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;
+    }
+  }
+
+}
diff --git a/src/assets/scss/theme/meibo-light.scss b/src/assets/scss/theme/meibo-light.scss
new file mode 100644
index 0000000..318d062
--- /dev/null
+++ b/src/assets/scss/theme/meibo-light.scss
@@ -0,0 +1,117 @@
+@mixin meibo-light ($tone) {
+
+  .button {
+    background-color: $tone;
+  }
+
+  .switch {
+    .slider {
+
+      &,
+      &:before {
+        background-color: $tone;
+      }
+    }
+  }
+
+  .paragraph {
+    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;
+    }
+  }
+
+  .list {
+
+    &.head {
+      background-color: $tone;
+    }
+
+    .action {
+      p:hover {
+        color: $tone;
+      }
+    }
+  }
+
+  .sidebar {
+
+    ul li a {
+
+      &:hover,
+      &.active {
+        color: $tone;
+      }
+    }
+  }
+
+  .loader {
+    svg.circular {
+      .path {
+        stroke: $tone;
+      }
+    }
+  }
+
+  .todos {
+    &.indent-1 {
+      background-color: $tone;
+    }
+
+    &.indent-2 {
+
+      .checkbox {
+        color: $tone;
+      }
+    }
+  }
+
+  .theme {
+    color: $tone;
+  }
+
+}
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index a552f1d..8a1e003 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -12,16 +12,55 @@ const state = {
   effect: {
     translate3d: true
   },
-  message: []
+  message: [],
+  themeList: [
+    {
+      colorSets: { tone: '#009999', background: '#F8F8F8', font: '#282828' },
+      className: 'meibo-default',
+      name: '原初梅寶'
+    },
+    {
+      colorSets: { tone: '#009999', background: '#282828', font: '#FFFFFF' },
+      className: 'meibo-dark-green',
+      name: '暗黑梅寶'
+    },
+    {
+      colorSets: { tone: '#398FEF', background: '#282828', font: '#FFFFFF' },
+      className: 'meibo-dark-blue',
+      name: '午夜梅寶'
+    },
+    {
+      colorSets: { tone: '#F7615C', background: '#282828', font: '#FFFFFF' },
+      className: 'meibo-dark-red',
+      name: '魅惑梅寶'
+    },
+    {
+      colorSets: { tone: '#FABD40', background: '#282828', font: '#FFFFFF' },
+      className: 'meibo-dark-yellow',
+      name: '黃蜂梅寶'
+    },
+    {
+      colorSets: { tone: '#F7615C', background: '#F8F8F8', font: '#282828' },
+      className: 'meibo-light-red',
+      name: '瑰麗梅寶'
+    }
+  ],
+  theme: 'meibo-default'
 }
 
 const getters = {
-  message: state => state.message
+  message: state => state.message,
+  themeList: state => state.themeList,
+  theme: state => state.theme
 }
 
 const actions = {
   setMessage ({ commit }, msg) {
     commit(types.MESSAGE, { msg: msg, time: new Date().getTime() })
+  },
+
+  setTheme ({ commit }, themeName) {
+    commit(types.THEME, themeName)
   }
 }
 
@@ -41,6 +80,10 @@ const mutations = {
 
   [types.MESSAGE] (state, message) {
     state.message.push(message)
+  },
+
+  [types.THEME] (state, theme) {
+    state.theme = theme
   }
 }
 
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 98d0155..70e69fc 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -26,6 +26,7 @@ const actions = {
         meta: res.data.meta
       }
       commit(types.SET_USER, userInfo)
+      commit(types.THEME, userInfo.meta.theme || 'meibo-default')
       return res.data
     } catch (err) {
       throw err
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 85b6ec4..c96114b 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -16,6 +16,8 @@ export const TODOS          = 'TODOS'
 
 export const MESSAGE        = 'MESSAGE'
 
+export const THEME          = 'THEME'
+
 export default {
   UPDATE_TYPE: (state, type) => {
     state.type = type
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 893f9cf..124ce20 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -29,7 +29,7 @@
   export default {
     data () {
       return {
-        recaptcha: false,
+        recaptcha: true,
         user: {
           username: '',
           password: ''
diff --git a/src/views/User.vue b/src/views/User.vue
index 8fa8ec6..eec3dad 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -7,7 +7,7 @@
       </header>
       <div class="user-config">
         <div class="input-box">
-          <input type="password" v-model="user.old_password" :class="{ 'verified': recaptcha }" placeholder="" autocomplete="off" required>
+          <input type="password" v-model="user.old_password" placeholder="" autocomplete="off" required>
           <span class="bar"></span>
           <label>
             <span>舊密碼</span>
@@ -27,10 +27,19 @@
             <span>新暱稱</span>
           </label>
         </div>
-        <div class="msg">
-          <p>{{ msg }}</p>
+        <h2>主題</h2>
+        <div class="theme-picker">
+          <div class="theme" v-for="theme in themeList" :key="theme.className" @click="changeTheme(theme.className)">
+            <div class="box tone" :style="{ 'background-color': theme.colorSets.tone }">
+              <div class="back" :style="{ 'background-color': theme.colorSets.background }"></div>
+            </div>
+            <p>{{ theme.name }}</p>
+            <p>
+              <font-awesome-icon v-if="nowTheme === theme.className" icon="check" />
+              <font-awesome-icon v-else-if="!nowTheme && (theme.className === 'meibo-default')" icon="check" />
+            </p>
+          </div>
         </div>
-        <vue-recaptcha class="recaptcha" @verify="onVerify" ref="recaptcha" sitekey="6LefXEEUAAAAAPN6fbJMgC6bEOB2n_4b_CxRXIqv"></vue-recaptcha>
         <div class="button" @click="send()"><span>更新使用者資訊</span></div>
       </div>
     </div>
@@ -39,40 +48,37 @@
 
 <script>
   import { mapActions, mapGetters } from 'vuex'
-  import VueRecaptcha from 'vue-recaptcha'
   export default {
     data () {
       return {
-        recaptcha: false,
-        msg: '',
         user: {
           meta: {}
         }
       }
     },
-    components: {
-      VueRecaptcha
-    },
     computed: {
-      ...mapGetters(['userInfo'])
+      ...mapGetters(['userInfo', 'themeList']),
+      ...mapGetters({nowTheme: 'theme'})
+    },
+    mounted () {
+      this.user.meta = {
+        ...this.userInfo.meta
+      }
     },
     methods: {
-      ...mapActions(['updateUser']),
-      onVerify () {
-        this.recaptcha = true
-      },
+      ...mapActions(['updateUser', 'setMessage', 'setTheme']),
       async send () {
-        this.msg = ''
-        if (!this.recaptcha) {
-          this.msg = `請先進行機器人驗證`
-        } else {
-          try {
-            await this.updateUser({user: this.user, uid: this.userInfo.uid})
-          } catch (err) {
-            this.msg = `舊密碼錯誤，請再試一次。`
-            this.$refs.recaptcha.reset()
-          }
+        try {
+          await this.updateUser({user: this.user, uid: this.userInfo.uid})
+          this.setMessage({ title: '修改成功，請重新登入', status: 'ok' })
+        } catch (err) {
+          this.setMessage({ title: '舊密碼錯誤，請再試一次', status: 'error' })
         }
+      },
+      changeTheme (themeName) {
+        this.setTheme(themeName)
+        this.user.meta.theme = themeName
+        this.$cookie.set('theme', themeName)
       }
     }
   }