refs #98 Set color from theme color in notifications

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/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 () {