fix: Set color theme definition on the top level component

src/renderer/App.vue

@@ -14,7 +14,15 @@ export default {
       theme: (state) => {
         return {
           '--theme-background-color': state.App.theme.background_color,
-          '--theme-primary-color': state.App.theme.primary_color
+          '--theme-selected-background-color': state.App.theme.selected_background_color,
+          '--theme-global-header-color': state.App.theme.global_header_color,
+          '--theme-side-menu-color': state.App.theme.side_menu_color,
+          '--theme-primary-color': state.App.theme.primary_color,
+          '--theme-regular-color': state.App.theme.regular_color,
+          '--theme-secondary-color': state.App.theme.secondary_color,
+          '--theme-border-color': state.App.theme.border_color,
+          '--theme-header-menu-color': state.App.theme.header_menu_color,
+          '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color
         }
       }
     })
@@ -34,7 +42,16 @@ body { font-family: 'Noto Sans', sans-serif; }
 
 html, body, #app {
   --theme-background-color: #ffffff;
+  --theme-selected-background-color: #f2f6fc;
+  --theme-global-header-color: #4a5664;
+  --theme-side-menu-color: #373d48;
   --theme-primary-color: #303133;
+  --theme-regular-color: #606266;
+  --theme-secondary-color: #909399;
+  --theme-border-color: #ebeef5;
+  --theme-header-menu-color: #ffffff;
+  --theme-wrapper-mask-color: rgba(255, 255, 255, 0.7);
+
   background-color: var(--theme-background-color);
   color: var(--theme-primary-color);
 

src/renderer/components/Preferences.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container id="preferences" :style="theme">
+  <el-container id="preferences">
     <el-header class="header">
       <el-row>
         <el-col :span="23">
@@ -44,14 +44,7 @@ export default {
     ...mapState({
       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
-        }
-      }
+      backgroundColor: state => state.App.theme.background_color
     })
   },
   methods: {
@@ -70,9 +63,6 @@ export default {
 
 <style lang="scss" scoped>
 #preferences {
-  --theme-background-color: #ffffff;
-  --theme-border-color: #ebeef5;
-  --theme-secondary-color: #909399;
   height: 100%;
 
   .header {

src/renderer/components/Preferences/Account.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="account" :style="theme">
+<div id="account">
   <h2>Account</h2>
   <div class="connected-account">
     <h3>Connected Accounts</h3>
@@ -59,14 +59,7 @@ export default {
   computed: {
     ...mapState({
       accounts: state => state.Preferences.Account.accounts,
-      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
-        }
-      }
+      accountLoading: state => state.Preferences.Account.accountLoading
     })
   },
   created () {
@@ -117,10 +110,6 @@ export default {
 
 <style lang="scss" scoped>
 #account {
-  --theme-secondary-color: #909399;
-  --theme-bacgrkound-color: #ffffff;
-  --theme-border-color: #ebeef5;
-
   .el-table /deep/ {
     tr,
     th,

src/renderer/components/Preferences/General.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="general" v-loading="loading" :style="theme">
+<div id="general" v-loading="loading">
   <h2>General</h2>
   <div class="theme">
     <h3>Theme color</h3>
@@ -41,12 +41,7 @@ export default {
   name: 'general',
   computed: {
     ...mapState({
-      loading: state => state.Preferences.General.loading,
-      theme: (state) => {
-        return {
-          '--theme-secondary-color': state.App.theme.secondary_color
-        }
-      }
+      loading: state => state.Preferences.General.loading
     }),
     theme: {
       get () {
@@ -91,8 +86,6 @@ export default {
 
 <style lang="scss" scoped>
 #general {
-  --theme-secondary-color: #909399;
-
   .theme {
     color: var(--theme-secondary-color);
   }

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;" :style="theme">
+    <header class="header" style="-webkit-app-region: drag;">
       <header-menu></header-menu>
     </header>
     <contents></contents>
@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import Contents from './TimelineSpace/Contents'
@@ -21,15 +20,6 @@ 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,
@@ -105,8 +95,6 @@ export default {
   box-sizing: border-box;
 
   .header {
-    --theme-border-color: #dcdfe6;
-
     width: 100%;
     position: fixed;
     top: 0;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="favourite" tabIndex="0" :style="theme">
+  <div class="favourite" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="star" scale="0.7"></icon>
@@ -36,21 +36,10 @@
 <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,
-          '--theme-selected-background-color': state.App.theme.selected_background_color
-        }
-      }
-    })
-  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -96,8 +85,6 @@ function findLink (target) {
 }
 
 .favourite {
-  --theme-border-color: #ebeef5;
-
   padding: 8px 0 0 16px;
 
   .action {
@@ -179,7 +166,6 @@ function findLink (target) {
 }
 
 .favourite:focus {
-  --theme-selected-background-color: #f2f6fc;
   background-color: var(--theme-selected-background-color);
   outline: 0;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="follow" tabIndex="0" :style="theme">
+  <div class="follow" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="user-plus" scale="0.7"></icon>
@@ -17,21 +17,9 @@
 </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,
-          '--theme-selected-background-color': state.App.theme.selected_background_color
-        }
-      }
-    })
-  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -55,7 +43,6 @@ export default {
 }
 
 .follow {
-  --theme-border-color: #ebeef5;
   padding: 8px 0 0 16px;
 
   .action {
@@ -102,7 +89,6 @@ export default {
 }
 
 .follow:focus {
-  --theme-selected-background-color: #f2f6fc;
   background-color: var(--theme-selected-background-color);
   outline: 0;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="reblog" tabIndex="0" :style="theme">
+  <div class="reblog" tabIndex="0">
     <div class="action">
       <div class="action-mark">
         <icon name="retweet" scala="0.7"></icon>
@@ -36,21 +36,10 @@
 <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,
-          '--theme-selected-background-color': state.App.theme.selected_background_color
-        }
-      }
-    })
-  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -96,7 +85,6 @@ function findLink (target) {
 }
 
 .reblog {
-  --theme-border-color: #ebeef5;
   padding: 8px 0 0 16px;
 
   .action {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="toot" tabIndex="0" :style="theme">
+  <div class="toot" tabIndex="0">
     <div class="icon">
       <img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
     </div>
@@ -64,22 +64,10 @@
 <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) {
@@ -193,9 +181,6 @@ function findLink (target) {
 <style lang="scss" scoped>
 
 .toot {
-  --theme-primary-color: #303133;
-  --theme-border-color: #ebeef5;
-
   padding: 8px 0 0 16px;
 
   .icon {
@@ -330,7 +315,6 @@ function findLink (target) {
 }
 
 .toot:focus {
-  --theme-selected-background-color: #f2f6fc;
   background-color: var(--theme-selected-background-color);
   outline: 0;
 }

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

@@ -1,5 +1,5 @@
 <template>
-<div class="user" @click="openUser(user)" :style="theme">
+<div class="user" @click="openUser(user)">
   <div class="icon">
     <img :src="user.avatar" />
   </div>
@@ -15,20 +15,9 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-
 export default {
   name: 'user',
   props: [ 'user' ],
-  computed: {
-    ...mapState({
-      theme: (state) => {
-        return {
-          '--theme-border-color': state.App.theme.border_color
-        }
-      }
-    })
-  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -48,8 +37,6 @@ export default {
 
 <style lang="scss" scoped>
 .user {
-  --theme-border-color: #ebeef5;
-
   display: flex;
   box-sizing: border-box;
   padding: 4px 12px 8px;

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="search" :style="theme">
+  <div id="search">
     <div class="search-header" v-loading="loading" :element-loading-background="loadingBackground">
       <el-form :inline="true">
         <el-select v-model="target" placeholder="search" class="search-target">
@@ -42,14 +42,7 @@ export default {
   computed: {
     ...mapState({
       loading: state => state.TimelineSpace.Contents.Search.loading,
-      loadingBackground: state => state.App.theme.wrapper_mask_color,
-      theme: (state) => {
-        return {
-          '--theme-background-color': state.App.theme.background_color,
-          '--theme-selected-background-color': state.App.theme.selected_background_color,
-          '--theme-primary-color': state.App.theme.primary_color
-        }
-      }
+      loadingBackground: state => state.App.theme.wrapper_mask_color
     })
   },
   methods: {
@@ -74,11 +67,6 @@ export default {
 
 <style lang="scss" scoped>
 #search {
-  --theme-background-color: #ffffff;
-  --theme-selected-background-color: #f2f6fc;
-  --theme-primary-color: #303133;
-  --theme-border-color: #ebeef5;
-
   border-top: 1px solid var(--theme-border-color);
 
   .search-header {

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

@@ -1,6 +1,6 @@
 <template>
 <transition name="slide-detail">
-  <div id="side_bar" v-if="openSideBar" :style="theme">
+  <div id="side_bar" v-if="openSideBar">
     <div class="header">
       <i class="el-icon-close" @click="close"></i>
     </div>
@@ -24,13 +24,7 @@ export default {
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
-      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
-        }
-      }
+      component: state => state.TimelineSpace.Contents.SideBar.component
     })
   },
   beforeDestroy () {
@@ -46,9 +40,6 @@ export default {
 
 <style lang="scss" scoped>
 #side_bar {
-  --theme-border-color: #ebeef5;
-  --theme-header-color: #f2f6fc;
-
   position: fixed;
   top: 48px;
   right: 0;
@@ -58,7 +49,7 @@ export default {
   border-left: solid 1px var(--theme-border-color);
 
   .header {
-    background-color: var(--theme-header-color);
+    background-color: var(--theme-selected-background-color);
     padding: 4px 8px;
     border-top: solid 1px var(--theme-border-color);
     border-bottom: solid 1px var(--theme-border-color);

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

@@ -3,8 +3,7 @@
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
-     element-loading-background="rgba(0, 0, 0, 0.8)"
-     :style="theme">
+     element-loading-background="rgba(0, 0, 0, 0.8)">
   <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
       <div class="follow-follower" v-if="relationship !== null && relationship !== ''">
@@ -173,9 +172,6 @@ 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%;
@@ -183,7 +179,7 @@ function findLink (target) {
   }
 
   .header {
-    background-color: var(--theme-mask-color);
+    background-color: var(--theme-wrapper-mask-color);
     text-align: center;
     padding: 12px;
     box-sizing: border-box;

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

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

src/renderer/components/TimelineSpace/HeaderMenu.vue

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

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="side_menu" :style="theme">
+  <div id="side_menu">
     <div class="profile-wrapper" style="-webkit-app-region: drag;">
       <div class="profile">
         <div>@{{ account.username }}</div>
@@ -65,12 +65,7 @@ export default {
       unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
       unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
       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
-        }
-      }
+      themeColor: state => state.App.theme.side_menu_color
     })
   },
   methods: {
@@ -83,10 +78,8 @@ export default {
 
 <style lang="scss" scoped>
 #side_menu {
-  --theme-background-color: #373d48;
-
   .profile-wrapper {
-    background-color: var(--theme-background-color);
+    background-color: var(--theme-side-menu-color);
     position: fixed;
     top: 0;
     left: 65px;