refs #98 Set color from theme color in home

src/renderer/App.vue

@@ -1,26 +1,41 @@
 <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')
+  },
+  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/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/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>
@@ -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,17 @@ function findLink (target) {
       color: #409eff;
     }
   }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
 }
 
 .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/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/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.selected_background_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

@@ -3,7 +3,16 @@ import router from '../router'
 
 const App = {
   namespaced: true,
-  state: {},
+  state: {
+    theme: {
+      background_color: '#282c37', // #ffffff
+      selected_background_color: '#313543', // #f2f6fc
+      global_header_color: '#393f4f', // #4a5664
+      side_menu_color: '#191b22', // #373d48
+      primary_color: '#ffffff', // #303133
+      border_color: '#606266' // #ebeef5
+    }
+  },
   mutations: {},
   actions: {
     watchShortcutsEvents () {