diff --git a/src/channels/specialChannels.scss b/src/channels/specialChannels.scss
index 98baa9fe..d7fbe098 100644
--- a/src/channels/specialChannels.scss
+++ b/src/channels/specialChannels.scss
@@ -1,10 +1,10 @@
 /*CUSTOMIZE CHANNELS*/
 
 %customizeChannelsHeader {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6)) !important;
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6)) !important;
 }
 %customizeChannels {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5)) !important;
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.5)) !important;
 }
 
 /*header*/
@@ -54,10 +54,10 @@
 }
 
 %browseChannelsRow {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   &:hover {
     &:not(%browseChannelsDisabled) {
-      background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
+      background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
     }
   }
 }
@@ -111,7 +111,7 @@
   %serverGuideAction,
   %serverGuideSidebarCard,
   %serverGuideRow {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   }
   %serverGuideAction:hover {
     background: $hover-color;
@@ -140,7 +140,7 @@
 }
 /*Cases where we get taken to channels*/
 %serverGuideChannelHintBanner {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 %serverGuideChannelHintIcon {
   background: $main-color;
diff --git a/src/chat/call.scss b/src/chat/call.scss
index 82a93497..8bfde681 100644
--- a/src/chat/call.scss
+++ b/src/chat/call.scss
@@ -1,8 +1,8 @@
 /* PRIVATE CALL */
 %callWrapper {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.8));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
   &%callMinimum {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.8));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
   }
 }
 %callContainer {
@@ -11,7 +11,7 @@
 
 // VIDEO STREAM
 %callTile {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.7));
 }
 %callInviteButton {
   background-color: $main-color;
@@ -52,7 +52,7 @@
 }
 
 %streamStillRunning {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.7));
 }
 
 // ACTION BUTTON
diff --git a/src/chat/stageCall.scss b/src/chat/stageCall.scss
index 035e236d..ecc2c4bf 100644
--- a/src/chat/stageCall.scss
+++ b/src/chat/stageCall.scss
@@ -63,9 +63,9 @@
   }
 }
 %stageOptionContainer {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
   &:hover {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.6));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
   }
 }
 %stageLeaveButton {
@@ -99,7 +99,7 @@
 
 // REQUESTS
 %stageRequestContainer {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
 }
 %stageIconBigBackground {
   background-color: $main-color;
diff --git a/src/fixespt2.scss b/src/fixespt2.scss
index c87e65fb..fd9bc2e2 100644
--- a/src/fixespt2.scss
+++ b/src/fixespt2.scss
@@ -5,7 +5,7 @@ div.popoutList_da8701.phoneFieldPopout_ff761b.elevationBorderLow_ff8688 {
 
 // Security keys list https://discord.com/channels/212324635356692500/858733936800956427/1270769660039663636
 div.credentialList_eaef52 {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   border-radius: 4px;
 }
 div.name_d808b0 {
diff --git a/src/general/scrollbar.scss b/src/general/scrollbar.scss
index 1ba8a28b..c34508ba 100644
--- a/src/general/scrollbar.scss
+++ b/src/general/scrollbar.scss
@@ -62,7 +62,7 @@
 %friendsTable {
   %scroller {
     &::-webkit-scrollbar-track-piece {
-      background-color: rgba(0, 0, 0, calc($bg-shading * 0.3)) !important;
+      background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.3)) !important;
     }
   }
 }
diff --git a/src/home/friends.scss b/src/home/friends.scss
index 28475e16..44922753 100644
--- a/src/home/friends.scss
+++ b/src/home/friends.scss
@@ -7,7 +7,7 @@
 
 // FRIENDS COLUMN
 %friendsColumn {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 %friendsSearch {
   background-color: hsla(0, 0%, 100%, 0.07);
@@ -117,7 +117,7 @@
 
 // NOW PLAYING
 %nowPlayingColumn {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
 }
 %nowPlayingColumnContainer {
   background-color: transparent;
diff --git a/src/home/nitro.scss b/src/home/nitro.scss
index 0075bdf6..f27408ea 100644
--- a/src/home/nitro.scss
+++ b/src/home/nitro.scss
@@ -32,7 +32,7 @@
 
 // PERKS PAGE
 %nitroPerksScroller {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
   transition: all 0.5s ease-in-out;
 }
 %nitroPerksBackButton {
diff --git a/src/home/requests.scss b/src/home/requests.scss
index 9e318b2c..a3975cd2 100644
--- a/src/home/requests.scss
+++ b/src/home/requests.scss
@@ -7,5 +7,5 @@
 }
 /*was it spam*/
 %messageReqSpamCheck {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
 }
diff --git a/src/injectors/ven/plugins.scss b/src/injectors/ven/plugins.scss
index db5710ec..eec26f1b 100644
--- a/src/injectors/ven/plugins.scss
+++ b/src/injectors/ven/plugins.scss
@@ -1,6 +1,6 @@
 /*Shiki code blocks*/
 .shiki-plain {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.2)) !important;
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.2)) !important;
 }
 
 .shiki-container {
diff --git a/src/members/members.scss b/src/members/members.scss
index f18adfd8..2f864642 100644
--- a/src/members/members.scss
+++ b/src/members/members.scss
@@ -235,10 +235,10 @@
 }
 // MEMBERS ACTIVITY SECTION (as opposed to just the text under members)
 %memberActivityContainer {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   border: 2px solid transparent;
   &:hover {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
     border: 2px solid $hover-color;
   }
 }
diff --git a/src/messages/poll.scss b/src/messages/poll.scss
index 74106310..67e7b2f3 100644
--- a/src/messages/poll.scss
+++ b/src/messages/poll.scss
@@ -1,5 +1,5 @@
 %poll {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 /* selection */
 %pollAnswerSelectionIcon %pollRadioForeground {
diff --git a/src/modals/otherModals.scss b/src/modals/otherModals.scss
index 24c485ca..1d401013 100644
--- a/src/modals/otherModals.scss
+++ b/src/modals/otherModals.scss
@@ -147,7 +147,7 @@
   background: rgba(0, 0, 0, 0.4);
 }
 %activityTag {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.5));
 }
 %activityItem {
   background: rgba(0, 0, 0, 0.4);
@@ -197,7 +197,7 @@
     }
   }
   %soundboardHint {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.3));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
   }
 }
 
diff --git a/src/pages/appDirectory.scss b/src/pages/appDirectory.scss
index 546c85cd..3380ee2c 100644
--- a/src/pages/appDirectory.scss
+++ b/src/pages/appDirectory.scss
@@ -13,19 +13,19 @@
 
 // HOME PAGE
 %directoryCategory {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   &:hover {
     background: $hover-color;
   }
 }
 %directoryCard,
 %directoryNewToApps {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 %directoryListCard {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
   &%directoryCardClickable:hover {
-    background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
+    background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
     color: #fff;
     %textMediumNormal {
       color: #fff;
@@ -33,7 +33,7 @@
   }
 }
 %directoryFooter {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 
 // SEARCH
diff --git a/src/pages/discordShop.scss b/src/pages/discordShop.scss
index 82c5ccd3..9ee4bd83 100644
--- a/src/pages/discordShop.scss
+++ b/src/pages/discordShop.scss
@@ -12,7 +12,7 @@
   background-color: transparent;
 }
 %shopBackground {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 %shopPageWrapper {
   background-color: transparent;
@@ -104,5 +104,5 @@
 
 // Shop what's new
 %shopWhatsNew {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.8));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
 }
diff --git a/src/pages/forums.scss b/src/pages/forums.scss
index a3d85a58..bc3466b4 100644
--- a/src/pages/forums.scss
+++ b/src/pages/forums.scss
@@ -56,10 +56,10 @@
 
 // GALLERY VIEW
 %forumCardContainer {
-  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
+  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
   border: 2px solid $main-color;
   &:hover {
-    background: rgba(0, 0, 0, calc($bg-shading * 0.3));
+    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
     border: 2px solid $hover-color;
   }
   &%forumOpen {
diff --git a/src/popouts/inboxPopout.scss b/src/popouts/inboxPopout.scss
index 06b7e105..93d696fb 100644
--- a/src/popouts/inboxPopout.scss
+++ b/src/popouts/inboxPopout.scss
@@ -145,5 +145,5 @@
 
 // CHATTING ABOUT: TOPIC
 %inboxChattingAbout {
-  background-color: hsla(0, 0%, 30%, calc($bg-shading * 0.5));
+  background-color: hsla(0, 0%, 30%, calc(var(--background-shading) * 0.5));
 }
diff --git a/src/popouts/searchPopout.scss b/src/popouts/searchPopout.scss
index dd0fe62e..b956383e 100644
--- a/src/popouts/searchPopout.scss
+++ b/src/popouts/searchPopout.scss
@@ -168,7 +168,7 @@
 %themeDark %calendarPicker {
   %datepicker,
   %datepickerHeader {
-    background-color: rgba(0, 0, 0, calc($bg-shading * 0.8));
+    background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
   }
   > %datepicker {
     %datepickerNavigation {
diff --git a/src/settings/onboarding.scss b/src/settings/onboarding.scss
index b236f22d..ea059344 100644
--- a/src/settings/onboarding.scss
+++ b/src/settings/onboarding.scss
@@ -38,7 +38,7 @@
 
 // FOOTER
 %onboardingFooterContainer {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4)) !important;
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4)) !important;
   box-shadow: none;
 }
 
@@ -193,7 +193,7 @@
 }
 
 %onboardingRecommendedReadOnly {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 
 %onboardingPickAnEmoji {
diff --git a/src/settings/userSettings.scss b/src/settings/userSettings.scss
index 3ee468fa..0629d336 100644
--- a/src/settings/userSettings.scss
+++ b/src/settings/userSettings.scss
@@ -13,7 +13,7 @@
   border-color: transparent;
 }
 %accountSettingsBadges {
-  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
+  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
 }
 // MY ACCOUNT - VERIFY PHONE
 %phoneInput {
diff --git a/src/variables.scss b/src/variables.scss
index 8739bf5a..043eec0c 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -163,4 +163,3 @@ $cv: (
 // SHORTHANDS
 $main-color: cv('colors.main');
 $hover-color: cv('colors.hover');
-$bg-shading: cv('bg.app.shading');