.

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -7,7 +7,7 @@
   flex: 1;
   width: inherit;
   height: calc(100% - #{$container-desktop-header-height});
-  background-color: $white;
+  background-color: var(--primary-background);
   box-sizing: border-box;
   --chat-input-wrapper-height: 3.125rem;
 }
@@ -44,7 +44,7 @@
   display: flex;
   flex-shrink: 0;
   padding: 0 1.125rem;
-  background-color: $c-input-100;
+  background-color: var(--primary-background);
   border: 0.0625rem solid $c-neutrals-100;
   border-left-width: 0;
   border-right-width: 0;
@@ -69,7 +69,7 @@
   outline: none;
   resize: none;
   font-size: 0.875rem;
-  color: $c-neutrals-600;
+  color: var(--primary-text);
   box-sizing: border-box;
   text-align: left;
   display: flex;

src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss

@@ -2,7 +2,7 @@
 @import "../../../../../../styles/sizes";
 
 .container {
-  --title-color: #{$secondary-blue};
+  --title-color: var(--primary-text);
 
   min-height: 3.0625rem;
   max-height: 5rem;
@@ -14,9 +14,9 @@
   user-select: none;
 
   &:hover {
-    background-color: $c-pink-hover-feed-cards;
+    background-color: var(--hover-fill);
     .lastMessage {
-      background-color: $c-pink-hover-feed-cards;
+      background-color: var(--hover-fill);
     }
     .lastMessageActive {
       background-color: $c-pink-active-feed-cards;

src/pages/commonFeed/components/FeedLayout/components/DesktopRightPane/DesktopRightPane.module.scss

@@ -6,6 +6,6 @@
   right: 0;
   bottom: 0;
   z-index: 1;
-  background-color: $c-shades-white;
+  background-color: var(--primary-background);
   border-left: 0.0625rem solid $c-light-gray;
 }

src/pages/commonFeed/components/FeedLayout/components/MobileChat/components/Header/Header.module.scss

@@ -8,7 +8,7 @@
   padding-right: 1.5rem;
   display: flex;
   align-items: center;
-  background-color: $c-shades-white;
+  background-color: var(--primary-background);
   border-bottom: 0.0625rem solid $c-light-gray;
   box-sizing: border-box;
 }

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss

@@ -83,6 +83,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  color: var(--primary-text);
 
   @include tablet {
     font-size: $moderate-xsmall;

src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss

@@ -12,9 +12,9 @@
   user-select: none;
 
   &:hover {
-    background-color: $c-pink-hover-feed-cards;
+    background-color: var(--hover-fill);
     .lastMessage {
-      background-color: $c-pink-hover-feed-cards;
+      background-color: var(--hover-fill);
     }
     .lastMessageActive {
       background-color: $c-pink-active-feed-cards;

src/shared/components/Chat/ChatMessage/ChatMessage.module.scss

@@ -53,13 +53,13 @@
 .messageText {
   padding: 0.5rem 0rem;
   border-radius: 0.875rem;
-  background-color: $c-light-gray;
+  background-color: var(--secondary-background);
   flex-direction: row;
   box-sizing: border-box;
   position: relative;
   text-align: start;
   font-size: $small;
-  color: $secondary-blue;
+  color: var(--primary-text);
 
   &:hover {
     .menuArrowButton {
@@ -108,7 +108,7 @@
 .messageName {
   font-size: $xsmall;
   font-weight: 600;
-  color: $secondary-blue;
+  color: var(--primary-text);
   margin-right: 2.5rem;
   margin-left: 1rem;
   margin-bottom: 0.5rem;

src/shared/components/Modal/index.scss

@@ -40,7 +40,7 @@ $modal-mobile-padding: 1.5rem;
 .modal {
   display: flex;
   flex-direction: column;
-  background-color: $white;
+  background-color: var(--primary-background);
   z-index: 100;
   position: relative;
   max-width: 900px;
@@ -110,7 +110,7 @@ $modal-mobile-padding: 1.5rem;
     font-weight: bold;
     line-height: 1;
     text-align: center;
-    color: $secondary-blue;
+    color: var(--primary-text);
   }
 
   .modal__action-wrapper {

src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss

@@ -33,7 +33,7 @@
   left: var(--main-pl);
   z-index: 2;
   height: var(--page-content-header);
-  background-color: $c-shades-white;
+  background-color: var(--primary-background);
   border-bottom: 0.0625rem solid $c-light-gray;
   box-sizing: border-box;
 

src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss

@@ -1,11 +1,11 @@
 @import "../../../../../../../../../constants";
 
 .item {
-  --bg-color: #{$c-shades-white};
+  --bg-color: --var(--primary-background);
   --item-pl-per-level: 1.125rem;
   --item-arrow-pl: var(--item-pl-per-level);
   --item-image-mr: 0.5rem;
-  --item-text-color: #{$c-neutrals-600};
+  --item-text-color: var(--primary-text);
 
   height: 2.75rem;
   padding-left: calc(var(--item-pl-per-level) * (var(--tree-level, 1) - 1));
@@ -20,7 +20,7 @@
   overflow: hidden;
 
   &:hover {
-    --bg-color: #{$c-primary-100};
+    --bg-color: var(--hover-fill);
   }
 }
 .itemActive {

src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/Content/Content.module.scss

@@ -7,7 +7,7 @@
   padding: 0.875rem 0.625rem;
   display: flex;
   align-items: center;
-  color: inherit;
+  color: var(--primary-text);
   background-color: transparent;
   border: 0;
   box-sizing: border-box;

src/shared/layouts/SidenavLayout/components/SidenavContent/components/UserInfo/components/MenuItems/components/MenuItem/MenuItem.module.scss

@@ -1,14 +1,14 @@
 @import "../../../../../../../../../../../constants";
 
 .item {
-  --item-bg-color: #{$c-shades-white};
+  --item-bg-color: var(--primary-background);
   --item-border: 0.0625rem solid #{$c-neutrals-100};
 
   padding: 1.125rem 1.5rem;
   display: flex;
   align-items: center;
   text-decoration: none;
-  color: inherit;
+  color: var(--primary-text);
   background-color: var(--item-bg-color);
   border: var(--item-border);
   border-bottom: 0;

src/shared/ui-kit/ContextMenu/components/ContextMenuItem/ContextMenuItem.module.scss

@@ -1,8 +1,8 @@
 @import "../../../../../constants";
 
 .item {
-  --item-color: #{$c-neutrals-600};
-  --item-bg-color: #{$c-shades-white};
+  --item-color: var(--primary-text);
+  --item-bg-color: var(--primary-background);
   --item-border: 0.0625rem solid #{$c-neutrals-100};
 
   margin: 0;

src/shared/ui-kit/DesktopMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss

@@ -1,8 +1,8 @@
 @import "../../../../../../../constants";
 
 .item {
-  --item-color: #{$c-neutrals-600};
-  --item-bg-color: #{$c-shades-white};
+  --item-color: var(--primary-text);
+  --item-bg-color: var(--primary-background);
   --item-border: 0.0625rem solid #{$c-neutrals-100};
 
   margin: 0;
@@ -34,7 +34,7 @@
   }
 }
 .itemActive {
-  --item-bg-color: #{$c-pink-hover-feed-cards};
+  --item-bg-color: var(--hover-fill);
 }
 
 .itemWithWarning {

src/shared/ui-kit/MobileMenu/components/MenuItems/components/MenuItem/MenuItem.module.scss

@@ -1,8 +1,8 @@
 @import "../../../../../../../constants";
 
 .item {
-  --item-color: #{$c-neutrals-600};
-  --item-bg-color: rgba(242, 242, 242, 0.8);
+  --item-color: var(--primary-text);
+  --item-bg-color: var(--primary-background);
 
   margin: 0;
   padding: 1.125rem 1.5rem;

src/styles/theme.scss

@@ -10,11 +10,14 @@
   --strong-gray: #7a819c;
   --gray-60: #6b718e;
   --red: #ff603e;
-
+  --hover-fill: #fff9fd;
   --white-text: #ffffff;
+  --primary-text: #001a36;
 }
 
 :root[data-theme="dark"] {
   --primary-background: #1f2535;
   --secondary-background: #2e3452;
+  --hover-fill: #131b23;
+  --primary-text: #ffffff;
 }