refs #98 Set color from theme color in preferences

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,15 @@ 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
+        }
+      }
     })
   },
   methods: {
@@ -59,41 +69,46 @@ export default {
 
 <style lang="scss" scoped>
 #preferences {
+  --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 {
+      border-right: solid 1px var(--theme-border-color);
+    }
+
+    .setting-menu /deep/ {
+      height: 100%;
+
+      .icon {
+        margin-right: 9px;
+      }
+
+      .el-menu-item {
+        .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,9 @@
 <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>
+  </div>
   <div class="sounds">
     <h3>Sounds</h3>
     <table class="sounds">
@@ -36,7 +39,12 @@ 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
+        }
+      }
     }),
     sound_fav_rb: {
       get () {
@@ -72,23 +80,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/store/App.js

@@ -10,6 +10,8 @@ const App = {
       global_header_color: '#393f4f', // #4a5664
       side_menu_color: '#191b22', // #373d48
       primary_color: '#ffffff', // #303133
+      regular_color: '#ebeef5', // #606266
+      secondary_color: '#e4e7ed', // #909399
       border_color: '#606266', // #ebeef5
       header_menu_color: '#444b5d', // #ffffff
       wrapper_mask_color: 'rgba(0, 0, 0, 0.7)' // rgba(255, 255, 255, 0.7)