2 files changed, 12 insertions, 15 deletions
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index b7f156d2..2e448f1c 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -15,11 +15,6 @@ export default {
         }
       }
     },
-    bodyStyle () {
-      return {
-        background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors.bg} 80%)`
-      }
-    },
     isOtherUser () {
       return this.user.id !== this.$store.state.users.currentUser.id
     },
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index e3c9b5f9..ca3da632 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -70,7 +70,7 @@
         </div>
       </div>
     </div>
-    <div class="panel-body profile-panel-body" :style="bodyStyle">
+    <div class="panel-body profile-panel-body">
       <div class="user-counts">
         <div class="user-count">
           <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a>
@@ -99,19 +99,21 @@
 @import '../../_variables.scss';
 
 .profile-panel-background {
-  background-size: cover;
-  border-radius: 10px;
+    background-size: cover;
+    border-radius: 10px;
 
-  .panel-heading {
-    padding: 0.6em 0em;
-    text-align: center;
-  }
+    .panel-heading {
+        padding: 0.6em 0em;
+        text-align: center;
+    }
 }
 
 .profile-panel-body {
-  top: -0em;
-  padding-top: 4em;
-  word-wrap: break-word;
+    top: -0em;
+    padding-top: 4em;
+    word-wrap: break-word;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
 }
 
 .user-info {