Merge pull request #214 from h3poteto/iss-98

closes #98 Set theme color and setting theme in preferences

src/main/preferences.js

@@ -6,7 +6,8 @@ const Base = {
     sound: {
       fav_rb: true,
       toot: true
-    }
+    },
+    theme: 'white'
   }
 }
 

src/renderer/App.vue

@@ -1,26 +1,42 @@
 <template>
-  <div id="app">
+  <div id="app" :style="theme">
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'Whalebird',
-    created () {
-      this.$store.dispatch('App/watchShortcutsEvents')
-    },
-    destroyed () {
-      this.$store.dispatch('App/removeShortcutsEvents')
-    }
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Whalebird',
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.App.theme.background_color,
+          '--theme-primary-color': state.App.theme.primary_color
+        }
+      }
+    })
+  },
+  created () {
+    this.$store.dispatch('App/watchShortcutsEvents')
+    this.$store.dispatch('App/loadPreferences')
+  },
+  destroyed () {
+    this.$store.dispatch('App/removeShortcutsEvents')
   }
+}
 </script>
 
 <style lang="scss">
 body { font-family: 'Noto Sans', sans-serif; }
 
 html, body, #app {
-  background-color: #ffffff;
+  --theme-background-color: #ffffff;
+  --theme-primary-color: #303133;
+  background-color: var(--theme-background-color);
+  color: var(--theme-primary-color);
 }
 
 html, body, #app, #global_header {

src/renderer/components/GlobalHeader.vue

@@ -5,7 +5,7 @@
       class="el-menu-vertical account-menu"
       :collapse="true"
       :route="true"
-      background-color="#4a5664"
+      :background-color="themeColor"
       text-color="#909399"
       active-text-color="#ffffff">
       <el-menu-item :index="index.toString()" v-for="(account, index) in accounts" v-bind:key="account._id" :route="{path: `/${account._id}/home`}" @click="select(account)">
@@ -31,7 +31,8 @@ export default {
   computed: {
     ...mapState({
       defaultActive: state => state.GlobalHeader.defaultActive,
-      accounts: state => state.GlobalHeader.accounts
+      accounts: state => state.GlobalHeader.accounts,
+      themeColor: state => state.App.theme.global_header_color
     })
   },
   created () {

src/renderer/components/Preferences.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container id="preferences">
+  <el-container id="preferences" :style="theme">
     <el-header class="header">
       <el-row>
         <el-col :span="23">
@@ -15,6 +15,8 @@
         <el-menu
           :default-active="defaultActive"
           class="setting-menu"
+          :text-color="primaryColor"
+          :background-color="backgroundColor"
           :route="true">
           <el-menu-item index="1" :route="{path: '/preferences/general'}" @click="general">
             <icon name="cog" class="icon" scale="1.3"></icon>
@@ -40,7 +42,16 @@ export default {
   name: 'preferences',
   computed: {
     ...mapState({
-      defaultActive: state => state.Preferences.defaultActive
+      defaultActive: state => state.Preferences.defaultActive,
+      primaryColor: state => state.App.theme.primary_color,
+      backgroundColor: state => state.App.theme.background_color,
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-secondary-color': state.App.theme.secondary_color,
+          '--theme-background-color': state.App.theme.background_color
+        }
+      }
     })
   },
   methods: {
@@ -59,41 +70,51 @@ export default {
 
 <style lang="scss" scoped>
 #preferences {
+  --theme-background-color: #ffffff;
+  --theme-border-color: #ebeef5;
+  --theme-secondary-color: #909399;
   height: 100%;
-}
 
-.header {
-  text-align: center;
-  border-bottom: 1px solid #dcdfe6;
+  .header {
+    text-align: center;
+    border-bottom: 1px solid var(--theme-border-color);
 
-  .close-button {
-    font-size: 24px;
-  }
-}
-
-.menu {
-  text-align: right;
-  padding-left: 24px;
-
-  .setting-menu /deep/ {
-    height: 100%;
-
-    .icon {
-      margin-right: 9px;
-    }
-
-    .el-menu-item {
-      .icon {
-        color: #909399;
-      }
-    }
-
-    .is-active {
-      .icon {
-        color: #409eff;
-      }
+    .close-button {
+      font-size: 24px;
     }
   }
 
+  .menu {
+    text-align: right;
+    padding-left: 24px;
+
+    .el-menu {
+      background-color: var(--theme-background-color);
+      border-right: solid 1px var(--theme-border-color);
+    }
+
+    .setting-menu /deep/ {
+      height: 100%;
+
+      .icon {
+        margin-right: 9px;
+      }
+
+      .el-menu-item {
+        transition: none;
+        -webkit-transition: none;
+
+        .icon {
+          color: var(--theme-secondary-color);
+        }
+      }
+
+      .is-active {
+        .icon {
+          color: #409eff;
+        }
+      }
+    }
+  }
 }
 </style>

src/renderer/components/Preferences/Account.vue

@@ -1,12 +1,12 @@
 <template>
-<div id="account">
+<div id="account" :style="theme">
   <h2>Account</h2>
   <div class="connected-account">
     <h3>Connected Accounts</h3>
     <template>
       <el-table
         :data="accounts"
-        stripe
+        tooltip-effect="dark"
         empty-text="No accounts"
         style="width: 100%"
         v-loading="accountLoading">
@@ -59,7 +59,14 @@ export default {
   computed: {
     ...mapState({
       accounts: state => state.Preferences.Account.accounts,
-      accountLoading: state => state.Preferences.Account.accountLoading
+      accountLoading: state => state.Preferences.Account.accountLoading,
+      theme: (state) => {
+        return {
+          '--theme-secondary-color': state.App.theme.secondary_color,
+          '--theme-background-color': state.App.theme.background_color,
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
     })
   },
   created () {
@@ -109,6 +116,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#account {
+  --theme-secondary-color: #909399;
+  --theme-bacgrkound-color: #ffffff;
+  --theme-border-color: #ebeef5;
+
+  .el-table /deep/ {
+    tr,
+    th,
+    td {
+      background-color: var(--theme-background-color);
+      color: var(--theme-secondary-color);
+      border-bottom: 1px solid var(--theme-border-color);
+    }
+
+  }
+
+  .el-table::before {
+    background-color: var(--theme-border-color);
+  }
+}
+
 .allow-up {
   padding: 0;
 }

src/renderer/components/Preferences/General.vue

@@ -1,6 +1,11 @@
 <template>
-<div id="general" v-loading="loading">
+<div id="general" v-loading="loading" :style="theme">
   <h2>General</h2>
+  <div class="theme">
+    <h3>Theme color</h3>
+    <el-radio v-model="theme" label="white">White</el-radio>
+    <el-radio v-model="theme" label="dark">Dark</el-radio>
+  </div>
   <div class="sounds">
     <h3>Sounds</h3>
     <table class="sounds">
@@ -36,8 +41,21 @@ export default {
   name: 'general',
   computed: {
     ...mapState({
-      loading: state => state.Preferences.General.loading
+      loading: state => state.Preferences.General.loading,
+      theme: (state) => {
+        return {
+          '--theme-secondary-color': state.App.theme.secondary_color
+        }
+      }
     }),
+    theme: {
+      get () {
+        return this.$store.state.Preferences.General.general.theme || 'white'
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/General/updateTheme', value)
+      }
+    },
     sound_fav_rb: {
       get () {
         return this.$store.state.Preferences.General.general.sound.fav_rb
@@ -72,23 +90,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sounds {
-  color: #606266;
-  width: 100%;
-  box-sizing: border-box;
+#general {
+  --theme-secondary-color: #909399;
 
-  td {
-    padding: 16px 0;
+  .theme {
+    color: var(--theme-secondary-color);
   }
 
-  .title {
-    text-align: right;
-    width: 50%;
-  }
+  .sounds {
+    color: var(--theme-secondary-color);
+    width: 100%;
+    box-sizing: border-box;
 
-  .status {
-    width: 50%;
-    text-align: center;
+    td {
+      padding: 16px 0;
+    }
+
+    .title {
+      text-align: right;
+      width: 50%;
+    }
+
+    .status {
+      width: 50%;
+      text-align: center;
+    }
   }
 }
 </style>

src/renderer/components/TimelineSpace.vue

@@ -2,7 +2,7 @@
 <div id="timeline_space">
   <side-menu></side-menu>
   <div class="page">
-    <header class="header" style="-webkit-app-region: drag;">
+    <header class="header" style="-webkit-app-region: drag;" :style="theme">
       <header-menu></header-menu>
     </header>
     <contents></contents>
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import Contents from './TimelineSpace/Contents'
@@ -20,6 +21,15 @@ import Modals from './TimelineSpace/Modals'
 export default {
   name: 'timeline-space',
   components: { SideMenu, HeaderMenu, Modals, Contents },
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   created () {
     const loading = this.$loading({
       lock: true,
@@ -95,12 +105,14 @@ export default {
   box-sizing: border-box;
 
   .header {
+    --theme-border-color: #dcdfe6;
+
     width: 100%;
     position: fixed;
     top: 0;
     left: 245px;
     height: 48px;
-    border-bottom: solid 1px #dcdfe6;
+    border-bottom: solid 1px var(--theme-border-color);
   }
 }
 

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="favourite" tabIndex="0">
+  <div class="favourite" tabIndex="0" :style="theme">
     <div class="action">
       <div class="action-mark">
         <icon name="star" scale="0.7"></icon>
@@ -36,10 +36,20 @@
 <script>
 import moment from 'moment'
 import { shell } from 'electron'
+import { mapState } from 'vuex'
 
 export default {
   name: 'favourite',
   props: ['message'],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -80,17 +90,13 @@ function findLink (target) {
 </script>
 
 <style lang="scss" scoped>
-.fill-line {
-  height: 1px;
-  background-color: #f2f6fc;
-  margin: 4px 0 0;
-}
-
 .bold {
   font-weight: bold;
 }
 
 .favourite {
+  --theme-border-color: #ebeef5;
+
   padding: 8px 0 0 16px;
 
   .action {
@@ -163,6 +169,12 @@ function findLink (target) {
       }
     }
   }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
 }
 
 .favourite:focus {

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="follow" tabIndex="0">
+  <div class="follow" tabIndex="0" :style="theme">
     <div class="action">
       <div class="action-mark">
         <icon name="user-plus" scale="0.7"></icon>
@@ -17,9 +17,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'follow',
   props: ['message'],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -38,17 +49,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.fill-line {
-  height: 1px;
-  background-color: #f2f6fc;
-  margin: 4px 0 0;
-}
-
 .bold {
   font-weight: bold;
 }
 
 .follow {
+  --theme-border-color: #ebeef5;
   padding: 8px 0 0 16px;
 
   .action {
@@ -86,6 +92,12 @@ export default {
       }
     }
   }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
 }
 
 .follow:focus {

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="reblog" tabIndex="0">
+  <div class="reblog" tabIndex="0" :style="theme">
     <div class="action">
       <div class="action-mark">
         <icon name="retweet" scala="0.7"></icon>
@@ -36,10 +36,20 @@
 <script>
 import moment from 'moment'
 import { shell } from 'electron'
+import { mapState } from 'vuex'
 
 export default {
   name: 'reblog',
   props: ['message'],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -80,17 +90,12 @@ function findLink (target) {
 </script>
 
 <style lang="scss" scoped>
-.fill-line {
-  height: 1px;
-  background-color: #f2f6fc;
-  margin: 4px 0 0;
-}
-
 .bold {
   font-weight: bold;
 }
 
 .reblog {
+  --theme-border-color: #ebeef5;
   padding: 8px 0 0 16px;
 
   .action {
@@ -161,6 +166,12 @@ function findLink (target) {
       }
     }
   }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
 }
 
 .reblog:focus {

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toot" tabIndex="0">
+  <div class="toot" tabIndex="0" :style="theme">
     <div class="icon">
       <img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
     </div>
@@ -41,7 +41,7 @@
         <el-button type="text" v-popover="{ name: message.id }">
           <icon name="ellipsis-h" scale="0.9"></icon>
         </el-button>
-        <popover :name="message.id" :width="120">
+        <popover :name="message.id" :width="120" class="action-pop-over">
           <ul class="toot-menu">
             <li role="button" @click="openDetail(message)">
               View Toot Detail
@@ -58,10 +58,22 @@
 <script>
 import moment from 'moment'
 import { shell } from 'electron'
+import { mapState } from 'vuex'
 
 export default {
   name: 'toot',
   props: ['message'],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-primary-color': state.App.theme.primary_color,
+          '--theme-selected-background-color': state.App.theme.selected_background_color,
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     originalMessage (message) {
       if (message.reblog !== null) {
@@ -170,13 +182,11 @@ function findLink (target) {
 </script>
 
 <style lang="scss" scoped>
-.fill-line {
-  height: 1px;
-  background-color: #ebeef5;
-  margin: 4px 0 0;
-}
 
 .toot {
+  --theme-primary-color: #303133;
+  --theme-border-color: #ebeef5;
+
   padding: 4px 0 0 16px;
 
   .icon {
@@ -197,7 +207,7 @@ function findLink (target) {
       .user {
         float: left;
         font-weight: 800;
-        color: #303133;
+        color: var(--theme-primary-color);
         font-size: 14px;
         cursor: pointer;
       }
@@ -212,7 +222,7 @@ function findLink (target) {
 
     .content {
       font-size: 14px;
-      color: #303133;
+      color: var(--theme-primary-color);
       margin: 4px 0 8px;
       word-wrap: break-word;
     }
@@ -292,10 +302,21 @@ function findLink (target) {
       color: #409eff;
     }
   }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
+
+  .action-pop-over {
+    color: #303133;
+  }
 }
 
 .toot:focus {
-  background-color: #f2f6fc;
+  --theme-selected-background-color: #f2f6fc;
+  background-color: var(--theme-selected-background-color);
   outline: 0;
 }
 </style>

src/renderer/components/TimelineSpace/Contents/Favourites.vue

@@ -3,7 +3,7 @@
     <div class="fav" v-for="message in favourites" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
-    <div class="loading-card" v-loading="lazyLoading">
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
 </template>
@@ -19,7 +19,8 @@ export default {
     ...mapState({
       account: state => state.TimelineSpace.account,
       favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
-      lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   created () {

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -3,7 +3,7 @@
     <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
       <toot :message="message"></toot>
     </div>
-    <div class="loading-card" v-loading="lazyLoading">
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
 </template>
@@ -18,7 +18,8 @@ export default {
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.homeTimeline,
-      lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   mounted () {

src/renderer/components/TimelineSpace/Contents/Lists.vue

@@ -3,7 +3,7 @@
   <div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
     <toot :message="message" v-on:update="updateToot"></toot>
   </div>
-  <div class="loading-card" v-loading="lazyLoading"></div>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
 </div>
 </template>
 
@@ -18,7 +18,8 @@ export default {
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Lists.timeline,
-      lazyLoading: state => state.TimelineSpace.Contents.Lists.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Lists.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   created () {

src/renderer/components/TimelineSpace/Contents/Local.vue

@@ -3,7 +3,7 @@
     <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
-    <div class="loading-card" v-loading="lazyLoading">
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
 </template>
@@ -18,7 +18,8 @@ export default {
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Local.timeline,
-      lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   created () {

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -3,7 +3,7 @@
     <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
       <notification :message="message"></notification>
     </div>
-    <div class="loading-card" v-loading="lazyLoading">
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
 </template>
@@ -18,7 +18,8 @@ export default {
   computed: {
     ...mapState({
       notifications: state => state.TimelineSpace.notifications,
-      lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   mounted () {

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -3,7 +3,7 @@
     <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
-    <div class="loading-card" v-loading="lazyLoading">
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
 </template>
@@ -18,7 +18,8 @@ export default {
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Public.timeline,
-      lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading,
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   created () {

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -1,6 +1,6 @@
 <template>
 <transition name="slide-detail">
-  <div id="side_bar" v-if="openSideBar">
+  <div id="side_bar" v-if="openSideBar" :style="theme">
     <div class="header">
       <i class="el-icon-close" @click="close"></i>
     </div>
@@ -24,7 +24,13 @@ export default {
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
-      component: state => state.TimelineSpace.Contents.SideBar.component
+      component: state => state.TimelineSpace.Contents.SideBar.component,
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-header-color': state.App.theme.selected_background_color
+        }
+      }
     })
   },
   methods: {
@@ -37,19 +43,22 @@ export default {
 
 <style lang="scss" scoped>
 #side_bar {
+  --theme-border-color: #ebeef5;
+  --theme-header-color: #f2f6fc;
+
   position: fixed;
   top: 48px;
   right: 0;
   width: 320px;
   height: calc(100% - 48px);
   overflow: auto;
-  border-left: solid 1px #dcdfe6;
+  border-left: solid 1px var(--theme-border-color);
 
   .header {
-    background-color: #f3f6fc;
+    background-color: var(--theme-header-color);
     padding: 4px 8px;
-    border-top: solid 1px #dcdfe6;
-    border-bottom: solid 1px #dcdfe6;
+    border-top: solid 1px var(--theme-border-color);
+    border-bottom: solid 1px var(--theme-border-color);
     text-align: right;
 
     .el-icon-close {

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -3,7 +3,8 @@
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
-     element-loading-background="rgba(0, 0, 0, 0.8)">
+     element-loading-background="rgba(0, 0, 0, 0.8)"
+     :style="theme">
   <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
       <div class="follow-follower" v-if="relationship !== null && relationship !== ''">
@@ -84,7 +85,14 @@ export default {
     ...mapState({
       account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
       relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship,
-      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading
+      loading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.loading,
+      theme: (state) => {
+        return {
+          '--theme-mask-color': state.App.theme.wrapper_mask_color,
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-primary-color': state.App.theme.primary_color
+        }
+      }
     })
   },
   watch: {
@@ -147,107 +155,110 @@ function findLink (target) {
 <style lang="scss" scoped>
 #account_profile {
   height: 100%;
-}
+  --theme-mask-color: rgba(255, 255, 255, 0.7);
+  --theme-border-color: #ebeef5;
+  --theme-primary-color: #303133;
 
-.header-background {
-  background-position: 50% 50%;
-  background-size: cover;
-}
-
-.header {
-  background-color: rgba(255, 255, 255, 0.7);
-  text-align: center;
-  padding: 12px;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  font-size: 14px;
-
-  .follow-follower {
-    .follower-status {
-      float: left;
-
-      .status {
-        border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.3);
-        padding: 4px 8px;
-      }
-    }
-    .follow-status {
-      float: right;
-
-      .follow {
-        cursor: pointer;
-      }
-
-      .unfollow {
-        color: #409eff;
-        cursor: pointer;
-      }
-    }
+  .header-background {
+    background-position: 50% 50%;
+    background-size: cover;
   }
 
-  .icon {
+  .header {
+    background-color: var(--theme-mask-color);
+    text-align: center;
     padding: 12px;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    font-size: 14px;
 
-    img {
-      width: 72px;
-      border-radius: 8px;
-    }
-  }
+    .follow-follower {
+      .follower-status {
+        float: left;
 
-  .username {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 24px;
-    margin: 0 auto 12px auto;
-  }
+        .status {
+          border-radius: 4px;
+          background-color: rgba(0, 0, 0, 0.3);
+          padding: 4px 8px;
+        }
+      }
+      .follow-status {
+        float: right;
 
-  .account {
-    color: #409eff;
-  }
-}
+        .follow {
+          cursor: pointer;
+        }
 
-.basic-info {
-  .info {
-    border-top: solid 1px #dcdfe6;
-    border-bottom: solid 1px #dcdfe6;
-    border-left: solid 1px #dcdfe6;
-    padding: 0 4px;
-
-    .tab {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      text-align: left;
-      line-height: 20px;
+        .unfollow {
+          color: #409eff;
+          cursor: pointer;
+        }
+      }
     }
 
-    .title {
-      font-size: 11px;
-      color: #909399;
+    .icon {
+      padding: 12px;
+
+      img {
+        width: 72px;
+        border-radius: 8px;
+      }
     }
 
-    .count {
-      font-weight: 800;
-      font-size: 16px;
-      color: #303133;
+    .username {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 24px;
+      margin: 0 auto 12px auto;
     }
-  }
 
-  .info-active {
-    border-bottom: solid 1px #409eff;
-
-    .count {
+    .account {
       color: #409eff;
     }
   }
 
-  .info:first-of-type {
-    border-left: none;
+  .basic-info {
+    .info {
+      border-top: solid 1px var(--theme-border-color);
+      border-bottom: solid 1px var(--theme-border-color);
+      border-left: solid 1px var(--theme-border-color);
+      padding: 0 4px;
+
+      .tab {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        text-align: left;
+        line-height: 20px;
+      }
+
+      .title {
+        font-size: 11px;
+        color: #909399;
+      }
+
+      .count {
+        font-weight: 800;
+        font-size: 16px;
+        color: var(--theme-primary-color);
+      }
+    }
+
+    .info-active {
+      border-bottom: solid 1px #409eff;
+
+      .count {
+        color: #409eff;
+      }
+    }
+
+    .info:first-of-type {
+      border-left: none;
+    }
+  }
+
+  .timeline {
+    font-size: 12px;
   }
 }
-
-.timeline {
-  font-size: 12px;
-}
 </style>

src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toot-detail" ref="detail">
+  <div class="toot-detail" ref="detail" :style="theme">
     <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
       <toot :message="message"></toot>
     </div>
@@ -23,7 +23,12 @@ export default {
     ...mapState({
       message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message,
       ancestors: state => state.TimelineSpace.Contents.SideBar.TootDetail.ancestors,
-      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants
+      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants,
+      theme: (state) => {
+        return {
+          '--theme-selected-color': state.App.theme.selected_background_color
+        }
+      }
     })
   },
   created () {
@@ -53,10 +58,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.original-toot{
-  .toot{
-    background-color: #f2f6fc;
-    outline: 0;
+.toot-detail {
+  --theme-selected-color: #f2f6fc;
+
+  .original-toot {
+    .toot {
+      background-color: var(--theme-selected-color);
+      outline: 0;
+    }
   }
 }
 </style>

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="header_menu">
+<div id="header_menu" :style="theme">
   <div class="channel">{{ title }}</div>
 </div>
 </template>
@@ -11,7 +11,12 @@ export default {
   name: 'header-menu',
   computed: {
     ...mapState({
-      title: state => state.TimelineSpace.HeaderMenu.title
+      title: state => state.TimelineSpace.HeaderMenu.title,
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.App.theme.header_menu_color
+        }
+      }
     })
   },
   created () {
@@ -54,6 +59,9 @@ export default {
 
 <style lang="scss" scoped>
 #header_menu {
+  --theme-background-color: inherit;
+  background-color: var(--theme-background-color);
+
   .channel {
     padding: 12px 24px;
     font-weight: bold;

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="side_menu">
+  <div id="side_menu" :style="theme">
     <div class="profile-wrapper" style="-webkit-app-region: drag;">
       <div class="profile">
         <div>@{{ account.username }}</div>
@@ -8,7 +8,7 @@
     </div>
     <el-menu
       :default-active="$route.path"
-      background-color="#373d48"
+      :background-color="themeColor"
       text-color="#909399"
       active-text-color="#ffffff"
       :router="true"
@@ -60,7 +60,13 @@ export default {
       account: state => state.TimelineSpace.account,
       unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
       unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
-      lists: state => state.TimelineSpace.SideMenu.lists
+      lists: state => state.TimelineSpace.SideMenu.lists,
+      themeColor: state => state.App.theme.side_menu_color,
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.App.theme.side_menu_color
+        }
+      }
     })
   },
   methods: {
@@ -73,8 +79,10 @@ export default {
 
 <style lang="scss" scoped>
 #side_menu {
+  --theme-background-color: #373d48;
+
   .profile-wrapper {
-    background-color: #373d48;
+    background-color: var(--theme-background-color);
     position: fixed;
     top: 0;
     left: 65px;
@@ -97,6 +105,7 @@ export default {
     left: 65px;
     height: 100%;
     width: 180px;
+    border: none;
 
     .el-badge__content {
       background-color: #409eff;

src/renderer/store/App.js

@@ -1,10 +1,27 @@
 import { ipcRenderer } from 'electron'
 import router from '../router'
+import { LightTheme, DarkTheme } from '../utils/theme'
 
 const App = {
   namespaced: true,
-  state: {},
-  mutations: {},
+  state: {
+    theme: LightTheme
+  },
+  mutations: {
+    updateTheme (state, themeName) {
+      switch (themeName) {
+        case 'light':
+          state.theme = LightTheme
+          break
+        case 'dark':
+          state.theme = DarkTheme
+          break
+        default:
+          state.theme = LightTheme
+          break
+      }
+    }
+  },
   actions: {
     watchShortcutsEvents () {
       ipcRenderer.on('open-preferences', (event) => {
@@ -13,6 +30,16 @@ const App = {
     },
     removeShortcutsEvents () {
       ipcRenderer.removeAllListeners('open-preferences')
+    },
+    loadPreferences ({ commit }) {
+      ipcRenderer.send('get-preferences')
+      ipcRenderer.once('error-get-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-get-preferences')
+      })
+      ipcRenderer.once('response-get-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-get-preferences')
+        commit('updateTheme', conf.general.theme)
+      })
     }
   }
 }

src/renderer/store/Preferences/General.js

@@ -7,7 +7,8 @@ const General = {
       sound: {
         fav_rb: true,
         toot: true
-      }
+      },
+      theme: 'white'
     },
     loading: false
   },
@@ -37,6 +38,26 @@ const General = {
         })
       })
     },
+    updateTheme ({ dispatch, commit, state }, theme) {
+      commit('changeLoading', true)
+      const newGeneral = Object.assign({}, state.general, {
+        theme: theme
+      })
+      const config = {
+        general: newGeneral
+      }
+      ipcRenderer.send('save-preferences', config)
+      ipcRenderer.once('error-save-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-save-preferences')
+        commit('changeLoading', false)
+      })
+      ipcRenderer.once('response-save-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-save-preferences')
+        commit('updateGeneral', conf.general)
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('changeLoading', false)
+      })
+    },
     updateSound ({ commit, state }, sound) {
       commit('changeLoading', true)
       const newSound = Object.assign({}, state.general.sound, sound)

src/renderer/utils/theme.js

@@ -0,0 +1,25 @@
+export const LightTheme = {
+  background_color: '#ffffff',
+  selected_background_color: '#f2f6fc',
+  global_header_color: '#4a5664',
+  side_menu_color: '#373d48',
+  primary_color: '#303133',
+  regular_color: '#606266',
+  secondary_color: '#909399',
+  border_color: '#ebeef5',
+  header_menu_color: '#ffffff',
+  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
+}
+
+export const DarkTheme = {
+  background_color: '#282c37',
+  selected_background_color: '#313543',
+  global_header_color: '#393f4f',
+  side_menu_color: '#191b22',
+  primary_color: '#ffffff',
+  regular_color: '#ebeef5',
+  secondary_color: '#e4e7ed',
+  border_color: '#606266',
+  header_menu_color: '#444b5d',
+  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
+}