diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js
index f4eb63c4b1..b41c36fa83 100644
--- a/packages/client/src/components/Article/MainButton/index.js
+++ b/packages/client/src/components/Article/MainButton/index.js
@@ -69,6 +69,7 @@ import styled, { css } from "styled-components";
 import { resendInvitesAgain } from "@docspace/shared/api/people";
 import { ArticleButtonLoader } from "@docspace/shared/skeletons/article";
 import { isMobile, isTablet } from "react-device-detect";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledButton = styled(Button)`
   font-weight: 700;
@@ -120,7 +121,7 @@ const StyledButton = styled(Button)`
     border-radius: 3px;
 
     user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 
diff --git a/packages/client/src/components/Badges.js b/packages/client/src/components/Badges.js
index ed867031fe..241e6db045 100644
--- a/packages/client/src/components/Badges.js
+++ b/packages/client/src/components/Badges.js
@@ -44,7 +44,7 @@ import { Badge } from "@docspace/shared/components/badge";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 
 import { RoomsType, ShareAccessRights } from "@docspace/shared/enums";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import { isTablet, isDesktop, size, classNames } from "@docspace/shared/utils";
 
@@ -56,7 +56,7 @@ const StyledWrapper = styled.div`
   background: ${(props) => props.theme.filesBadges.backgroundColor};
   padding: 6px;
   border-radius: 4px;
-  box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
+  box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
 `;
 
 StyledWrapper.defaultProps = { theme: Base };
@@ -306,7 +306,6 @@ const Badges = ({
       {/* {isForm  && ( 
         <BadgeWrapper isTile={isTile}>
           <HelpButton
-            color="#F2675A"
             place="bottom"
             size={isViewTable ? 12 : 16}
             className="bagde_alert icons-group"
diff --git a/packages/client/src/components/EditingWrapperComponent.js b/packages/client/src/components/EditingWrapperComponent.js
index dcd30ab646..6b7dea582a 100644
--- a/packages/client/src/components/EditingWrapperComponent.js
+++ b/packages/client/src/components/EditingWrapperComponent.js
@@ -158,7 +158,9 @@ const EditingWrapper = styled.div`
         }
       `};
 
-    ${({ isDisabled }) => isDisabled && "background-color: #fff"}
+    ${({ isDisabled }) =>
+      isDisabled &&
+      `background-color: ${(props) => props.theme.filesEditingWrapper.disabledBackground}`}
   }
 
   .edit-button {
diff --git a/packages/client/src/components/EmptyContainer/EmptyContainer.js b/packages/client/src/components/EmptyContainer/EmptyContainer.js
index 980f358462..61eb9469d6 100644
--- a/packages/client/src/components/EmptyContainer/EmptyContainer.js
+++ b/packages/client/src/components/EmptyContainer/EmptyContainer.js
@@ -57,6 +57,10 @@ const EmptyFolderWrapper = styled.div`
     .second-description {
       margin: 32px 0 24px;
       text-align: center;
+
+      & > span {
+        color: ${(props) => props.theme.filesEmptyContainer.descriptionColor};
+      }
     }
 
     .empty-folder_container-image {
diff --git a/packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js b/packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js
index 596efcd6f5..7237e2b117 100644
--- a/packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js
+++ b/packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js
@@ -97,7 +97,7 @@ const InviteUsersComponent = (props) => {
   return (
     <>
       <div className="second-description">
-        <Text as="span" color="#6A7378" fontSize="12px" noSelect>
+        <Text as="span" fontSize="12px" noSelect>
           {t("AddMembersDescription")}
         </Text>
       </div>
diff --git a/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js b/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js
index f06686be51..8c3182abfc 100644
--- a/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js
+++ b/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js
@@ -34,6 +34,7 @@ import { toastr } from "@docspace/shared/components/toast";
 import { Link } from "@docspace/shared/components/link";
 import { Text } from "@docspace/shared/components/text";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import { globalColors } from "@docspace/shared/themes";
 
 const ChangeUserTypeEvent = ({
   setVisible,
@@ -105,7 +106,11 @@ const ChangeUserTypeEvent = ({
           <>
             <Text>{t("Common:QuotaPaidUserLimitError")}</Text>
             {!isRoomAdmin && (
-              <Link color="#5387AD" isHovered={true} onClick={onClickPayments}>
+              <Link
+                color={globalColors.link}
+                isHovered={true}
+                onClick={onClickPayments}
+              >
                 {t("Common:PaymentsTitle")}
               </Link>
             )}
diff --git a/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js b/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
index c2f2b6a45a..b64fb2be6b 100644
--- a/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
@@ -30,7 +30,7 @@ import PropTypes from "prop-types";
 
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
 import { mobile } from "@docspace/shared/utils";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledIconBox = styled.div`
   display: none;
@@ -42,7 +42,7 @@ const StyledIconBox = styled.div`
   align-items: center;
 
   padding-inline-start: 16px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 const StyledMenuIcon = styled(MenuIcon)`
diff --git a/packages/client/src/components/NavMenu/sub-components/header-nav.js b/packages/client/src/components/NavMenu/sub-components/header-nav.js
index 6daad2280d..5cce4f8b69 100644
--- a/packages/client/src/components/NavMenu/sub-components/header-nav.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-nav.js
@@ -31,6 +31,7 @@ import ProfileActions from "./profile-actions";
 import { useTranslation } from "react-i18next";
 import { mobile, tablet } from "@docspace/shared/utils";
 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledNav = styled.nav`
   display: flex;
@@ -57,7 +58,7 @@ const StyledNav = styled.nav`
   }
   .icon-profile-menu {
     cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
     z-index: 300;
   }
 `;
diff --git a/packages/client/src/components/NavMenu/sub-components/header-unauth.js b/packages/client/src/components/NavMenu/sub-components/header-unauth.js
index 1460533f7a..5475f08a39 100644
--- a/packages/client/src/components/NavMenu/sub-components/header-unauth.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-unauth.js
@@ -29,7 +29,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Box } from "@docspace/shared/components/box";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { mobile, getLogoUrl } from "@docspace/shared/utils";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
 import { LanguageCombobox } from "@docspace/shared/components/language-combobox";
@@ -58,7 +58,7 @@ const Header = styled.header`
   }
 
   .header-logo-wrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .header-logo-min_icon {
diff --git a/packages/client/src/components/NavMenu/sub-components/header.js b/packages/client/src/components/NavMenu/sub-components/header.js
index dd4577c982..04f0f4ef89 100644
--- a/packages/client/src/components/NavMenu/sub-components/header.js
+++ b/packages/client/src/components/NavMenu/sub-components/header.js
@@ -42,7 +42,7 @@ import {
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import HeaderCatalogBurger from "./header-catalog-burger";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const Header = styled.header`
   display: flex;
@@ -59,7 +59,7 @@ const Header = styled.header`
     display: flex;
     align-items: center;
     justify-items: center;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     ${NoUserSelect}
   }
diff --git a/packages/client/src/components/NavMenu/sub-components/nav-item.js b/packages/client/src/components/NavMenu/sub-components/nav-item.js
index 37dd1f4d13..ad08c3be63 100644
--- a/packages/client/src/components/NavMenu/sub-components/nav-item.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav-item.js
@@ -35,7 +35,7 @@ import { Text } from "@docspace/shared/components/text";
 import { commonIconsStyles, tablet } from "@docspace/shared/utils";
 
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const NavItemSeparator = styled.div`
   border-bottom: 1px ${(props) => (props.dashed ? "dashed" : "solid")}
@@ -123,9 +123,9 @@ const NavItemBadge = styled(Badge)`
 `;
 
 const VersionBadge = styled.div`
-  background-color: #3cb55b;
+  background-color: ${globalColors.lightStatusPositive};
   border-radius: 5px;
-  color: #ffffff;
+  color: ${globalColors.white};
   display: inline-block;
   font-size: 10px;
   line-height: 8px;
diff --git a/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js b/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js
index 4087180820..18b80c09fc 100644
--- a/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav-logo-item.js
@@ -31,6 +31,7 @@ import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { NoUserSelect, getLogoUrl } from "@docspace/shared/utils";
 import { WhiteLabelLogoType } from "@docspace/shared/enums";
+import { globalColors } from "@docspace/shared/themes";
 
 const LogoItem = styled.div`
   display: flex;
@@ -41,7 +42,7 @@ const LogoItem = styled.div`
   cursor: pointer;
 
   .nav-logo-wrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
     ${NoUserSelect}
   }
 
diff --git a/packages/client/src/components/NavMenu/sub-components/nav.js b/packages/client/src/components/NavMenu/sub-components/nav.js
index 2de047f6b2..309e8d6842 100644
--- a/packages/client/src/components/NavMenu/sub-components/nav.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav.js
@@ -29,7 +29,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { isMobileOnly, isMobile } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledNav = styled.nav`
   background-color: ${(props) => props.theme.nav.backgroundColor};
@@ -43,7 +43,7 @@ const StyledNav = styled.nav`
   transition: width 0.3s ease-in-out;
   width: ${(props) => (props.opened ? "240px" : "0")};
   z-index: 200;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .version-box {
     position: absolute;
diff --git a/packages/client/src/components/TariffBar/helpers.js b/packages/client/src/components/TariffBar/helpers.js
index 92af9bb53f..2c27d3d080 100644
--- a/packages/client/src/components/TariffBar/helpers.js
+++ b/packages/client/src/components/TariffBar/helpers.js
@@ -24,8 +24,10 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-const ORANGE = "#F97A0B";
-const RED = "#F2665A";
+import { globalColors } from "@docspace/shared/themes";
+
+const ORANGE = globalColors.mainOrange;
+const RED = globalColors.mainRed;
 
 export const getSaasBar = (
   t,
diff --git a/packages/client/src/components/dialogs/BackupCodesDialog/index.js b/packages/client/src/components/dialogs/BackupCodesDialog/index.js
index 81daf2ea42..76d0402edb 100644
--- a/packages/client/src/components/dialogs/BackupCodesDialog/index.js
+++ b/packages/client/src/components/dialogs/BackupCodesDialog/index.js
@@ -43,6 +43,7 @@ import { isDesktop } from "@docspace/shared/utils";
 const StyledModal = styled(ModalDialogContainer)`
   .backup-codes-counter {
     margin-top: 16px;
+    color: ${(props) => props.theme.client.settings.security.tfa.textColor};
   }
 
   .backup-codes-print-link-wrapper {
@@ -107,11 +108,7 @@ class BackupCodesDialogComponent extends React.Component {
               {t("BackupCodesSecondDescription")}
             </Text>
 
-            <Text
-              className="backup-codes-counter"
-              fontWeight={600}
-              color="#A3A9AE"
-            >
+            <Text className="backup-codes-counter" fontWeight={600}>
               {backupCodesCount} {t("CodesCounter")}
             </Text>
 
diff --git a/packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js b/packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js
index fba64709eb..678370f0a8 100644
--- a/packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js
+++ b/packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js
@@ -40,6 +40,7 @@ import { withTranslation } from "react-i18next";
 import { EmployeeStatus } from "@docspace/shared/enums";
 import ModalDialogContainer from "../ModalDialogContainer";
 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";
 
 class ChangeUserStatusDialogComponent extends React.Component {
   constructor(props) {
@@ -87,7 +88,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
             <>
               <Text>{t("Common:QuotaPaidUserLimitError")}</Text>
               <Link
-                color="#5387AD"
+                color={globalColors.link}
                 isHovered={true}
                 onClick={this.onClickPayments}
               >
diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts
index db50b2dd6c..65da3f3320 100644
--- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts
+++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMemberRow/index.styled.ts
@@ -76,7 +76,7 @@ export const GroupMemberRow = styled.div<{}>`
 
     svg {
       path {
-        fill: #a3a9ae;
+        fill: ${(props) => props.theme.createEditGroupDialog.iconFill};
       }
     }
   }
diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts
index 62b0645524..eb1b807ef5 100644
--- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts
+++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/HeadOfGroupParam/index.styled.ts
@@ -30,7 +30,8 @@ export const Header = styled.div`
   width: 100%;
   padding: 8px 0 12px;
 
-  color: #a3a9ae;
+  color: ${(props) =>
+    props.theme.createEditRoomDialog.commonParam.descriptionColor};
   font-size: 14px;
   font-weight: 600;
   line-height: 16px;
@@ -50,6 +51,6 @@ export const SelectGroupManager = styled.div<{}>`
     font-size: 13px;
     font-weight: 600;
     line-height: 20px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.createEditGroupDialog.textColor};
   }
 `;
diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts
index 73cc9d889a..d7095c5a35 100644
--- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts
+++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.styled.ts
@@ -30,7 +30,8 @@ export const Header = styled.div`
   width: 100%;
   padding: 8px 0 12px;
 
-  color: #a3a9ae;
+  color: ${(props) =>
+    props.theme.createEditRoomDialog.commonParam.descriptionColor};
   font-size: 14px;
   font-weight: 600;
   line-height: 16px;
@@ -50,6 +51,6 @@ export const AddMembersButton = styled.div<{}>`
     font-size: 13px;
     font-weight: 600;
     line-height: 20px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.createEditGroupDialog.textColor};
   }
 `;
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
index 167f33bb44..223a1eb556 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js
@@ -28,7 +28,7 @@ import React from "react";
 import styled from "styled-components";
 
 import RoomType from "@docspace/shared/components/room-type";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { RoomsTypeValues } from "@docspace/shared/utils/common";
 
 const StyledDropdownDesktop = styled.div`
@@ -55,7 +55,7 @@ const StyledDropdownDesktop = styled.div`
     display: flex;
     flex-direction: column;
     padding: 6px 0;
-    box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+    box-shadow: 0px 12px 40px ${globalColors.popupShadow};
     border-radius: 6px;
   }
 `;
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
index 1c3e6e446a..ae7bd7fb32 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js
@@ -32,7 +32,7 @@ import { RoomsTypeValues } from "@docspace/shared/utils/common";
 import { Backdrop } from "@docspace/shared/components/backdrop";
 import { Portal } from "@docspace/shared/components/portal";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledDropdownMobile = styled.div`
   visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
@@ -40,8 +40,7 @@ const StyledDropdownMobile = styled.div`
   bottom: 0;
   z-index: 500;
   padding-top: 6px;
-
-  box-shadow: 0px -4px 60px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px -4px 60px ${globalColors.popupShadow};
   border-radius: 6px 6px 0px 0px;
   background: ${(props) =>
     props.theme.createEditRoomDialog.roomTypeDropdown.mobile.background};
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js
index cbcd711c5f..b89659a693 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js
@@ -32,10 +32,11 @@ import { HelpButton } from "@docspace/shared/components/help-button";
 
 const StyledHelpButton = styled(HelpButton)`
   border-radius: 50%;
-  background-color: #a3a9ae;
+  background-color: ${(props) =>
+    props.theme.createEditRoomDialog.helpButton.background};
   circle,
   rect {
-    fill: #ffffff;
+    fill: ${(props) => props.theme.createEditRoomDialog.helpButton.fill};
   }
 `;
 
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
index 4dd829fe6b..53dc7a3b25 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js
@@ -29,7 +29,7 @@ import styled from "styled-components";
 import { mobile } from "@docspace/shared/utils";
 
 import { DropDown } from "@docspace/shared/components/drop-down";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledDropDownWrapper = styled.div`
   width: 100%;
@@ -43,7 +43,7 @@ const StyledDropDown = styled(DropDown)`
     props.theme.createEditRoomDialog.dropdown.background};
   border: 1px solid
     ${(props) => props.theme.createEditRoomDialog.dropdown.borderColor};
-  box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px 12px 40px ${globalColors.popupShadow};
   border-radius: 3px;
   overflow: hidden;
   ${(props) => !props.hasItems && "visibility: hidden"};
diff --git a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/AccountInfo.js b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/AccountInfo.js
index 1632c4a5e2..544cc86c5c 100644
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/AccountInfo.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/AccountInfo.js
@@ -36,7 +36,7 @@ import { capitalize } from "lodash";
 const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
   ${commonIconsStyles}
   path {
-    fill: #f21c0e;
+    fill: ${(props) => props.theme.dialogs.errorText};
   }
   padding-inline-start: 8px;
 `;
diff --git a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
index 9863dfc0ed..1faa30b8b1 100644
--- a/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
+++ b/packages/client/src/components/dialogs/DataReassignmentDialog/sub-components/Body/Progress.js
@@ -32,13 +32,13 @@ import styled from "styled-components";
 import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
 import InterruptIcon from "PUBLIC_DIR/images/interrupt.icon.react.svg";
 import { commonIconsStyles } from "@docspace/shared/utils";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { withTranslation, Trans } from "react-i18next";
 
 const StyledCheckIcon = styled(CheckIcon)`
   ${commonIconsStyles}
   path {
-    fill: rgba(53, 173, 23, 1) !important;
+    fill: ${globalColors.lightStatusPositive} !important;
   }
 `;
 
diff --git a/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js b/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
index 0c597931c3..d2cad67e5d 100644
--- a/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
+++ b/packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
@@ -69,7 +69,7 @@ const StyledModalDialogContainer = styled(ModalDialogContainer)`
   }
 
   .text-warning {
-    color: #f24724;
+    color: ${(props) => props.theme.peopleDialogs.deleteUser.textColor};
     font-size: 16px;
     font-weight: 700;
     line-height: 22px;
diff --git a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js b/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js
index 5958b5a5b5..5762c1def3 100644
--- a/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js
+++ b/packages/client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js
@@ -67,7 +67,7 @@ const StyledDownloadContent = styled.div`
         isOpen ? "rotate(270deg)" : "rotate(90deg)"};
       svg {
         path {
-          fill: #333;
+          fill: ${(props) => props.theme.downloadDialog.iconFill};
         }
       }
     }
@@ -124,7 +124,7 @@ const StyledDownloadContent = styled.div`
       }
       .download-dialog-other-text {
         text-align: end;
-        color: #a3a9ae;
+        color: ${(props) => props.theme.downloadDialog.textColor};
       }
     }
   }
diff --git a/packages/client/src/components/panels/AddUsersPanel/index.tsx b/packages/client/src/components/panels/AddUsersPanel/index.tsx
index 8ae26aa7b2..b8a989a3c9 100644
--- a/packages/client/src/components/panels/AddUsersPanel/index.tsx
+++ b/packages/client/src/components/panels/AddUsersPanel/index.tsx
@@ -448,7 +448,7 @@ const AddUsersPanel = ({
               fontSize="12px"
               noSelect
               truncate
-              color="#A3A9AE"
+              color={theme.filesPanels.addUsers.textColor}
               dir="auto"
             >
               {`${userType} | ${email}`}
diff --git a/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js b/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
index 9fd03df8a2..5910d1d40a 100644
--- a/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
+++ b/packages/client/src/components/panels/EditLinkPanel/LinkBlock.js
@@ -51,9 +51,7 @@ const LinkBlock = (props) => {
       <Text className="edit-link-text" fontSize="16px" fontWeight={600}>
         {t("LinkName")}
       </Text>
-      <Text className="edit-link_required-icon" color="#F24724">
-        *
-      </Text>
+      <Text className="edit-link_required-icon">*</Text>
 
       <TextInput
         scale
diff --git a/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js b/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
index 67c3db55d3..36563722f9 100644
--- a/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
+++ b/packages/client/src/components/panels/EditLinkPanel/StyledEditLinkPanel.js
@@ -57,6 +57,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`
 
       .edit-link_required-icon {
         display: inline-flex;
+        color: ${(props) => props.theme.editLink.requiredColor};
         margin-inline-start: 2px;
       }
 
diff --git a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
index edc97bdc31..480ea9c623 100644
--- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
+++ b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledModalDialog = styled(ModalDialog)`
   .modal-header {
@@ -116,7 +117,7 @@ const StyledBody = styled.div`
 
   .embedding-panel_code-container {
     margin-top: 16px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {
diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
index 2fc21b0c3d..cfaf7d7c74 100644
--- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
+++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
@@ -112,6 +112,10 @@ const StyledInviteUserBody = styled.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
+
+  .about-label {
+    color: ${(props) => props.theme.filesPanels.invite.textColor};
+  }
 `;
 
 const StyledHeading = styled(Heading)`
@@ -201,7 +205,7 @@ const StyledInviteInput = styled.div`
   }
 
   display: flex;
-  border: 1px solid rgb(208, 213, 218);
+  border: ${(props) => props.theme.filesPanels.invite.border};
   border-radius: 3px;
 
   .copy-link-icon {
@@ -329,7 +333,7 @@ const StyledDropDown = styled(DropDown)`
       gap: 4px;
 
       p {
-        color: #4781d1;
+        color: ${(props) => props.theme.filesPanels.invite.addButtonColor};
       }
 
       svg {
@@ -337,7 +341,7 @@ const StyledDropDown = styled(DropDown)`
           theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"};
 
         path {
-          fill: #4781d1;
+          fill: ${(props) => props.theme.filesPanels.invite.addButtonColor};
         }
       }
     }
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
index 3157df9554..880549992b 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
@@ -49,6 +49,7 @@ import {
   StyledToggleButton,
   StyledDescription,
 } from "../StyledInvitePanel";
+import { globalColors } from "@docspace/shared/themes";
 
 const ExternalLinks = ({
   t,
@@ -197,8 +198,8 @@ const ExternalLinks = ({
             <IconButton
               size={16}
               iconName={MediaDownloadReactSvgUrl}
-              hoverColor="#333333"
-              iconColor="#A3A9AE"
+              hoverColor={globalColors.black}
+              iconColor={globalColors.gray}
               onClick={toggleActionLinks}
             />
             <DropDown
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js b/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
index 20cc56bbb7..0175298481 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/InfoBar.js
@@ -35,7 +35,7 @@ import { Text } from "@docspace/shared/components/text";
 const StyledInfoBar = styled.div`
   display: flex;
   background-color: ${(props) => props.theme.infoBar.background};
-  color: #333;
+  color: ${(props) => props.theme.infoBar.textColor};
   font-size: 12px;
   padding: 12px 16px;
   border-radius: 6px;
@@ -55,7 +55,7 @@ const StyledInfoBar = styled.div`
     .header-icon {
       svg {
         path {
-          fill: #ed7309;
+          fill: ${(props) => props.theme.infoBar.iconFill};
         }
       }
     }
diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
index 1bccecb7b6..166401fc6a 100644
--- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js
@@ -196,11 +196,10 @@ const Item = ({
 
         {!isGroup && (
           <Text
-            className="label"
+            className="label about-label"
             fontWeight={400}
             fontSize="12px"
             noSelect
-            color="#A3A9AE"
             truncate
           >
             {`${typeLabel} | ${email}`}
diff --git a/packages/client/src/components/panels/InvitePanel/utils/index.js b/packages/client/src/components/panels/InvitePanel/utils/index.js
index 951954fe6b..a08e7d37a4 100644
--- a/packages/client/src/components/panels/InvitePanel/utils/index.js
+++ b/packages/client/src/components/panels/InvitePanel/utils/index.js
@@ -29,6 +29,7 @@ import {
   RoomsType,
   EmployeeType,
 } from "@docspace/shared/enums";
+import { globalColors } from "@docspace/shared/themes";
 import { checkIfAccessPaid } from "SRC_DIR/helpers";
 
 /**
@@ -92,7 +93,7 @@ export const getAccessOptions = (
         productName: t("Common:ProductName"),
       }),
       ...(!standalone && { quota: t("Common:Paid") }),
-      color: "#EDC409",
+      color: globalColors.favoritesStatus,
       access:
         roomType === -1 ? EmployeeType.Admin : ShareAccessRights.FullAccess,
       type: "admin",
@@ -102,7 +103,7 @@ export const getAccessOptions = (
       label: t("Common:RoomAdmin"),
       description: getRoomAdminDescription(roomType, t),
       ...(!standalone && { quota: t("Common:Paid") }),
-      color: "#EDC409",
+      color: globalColors.favoritesStatus,
       access:
         roomType === -1 ? EmployeeType.User : ShareAccessRights.RoomManager,
       type: "manager",
@@ -112,7 +113,7 @@ export const getAccessOptions = (
       label: t("Common:PowerUser"),
       description: getPowerUserDescription(roomType, t),
       ...(!standalone && { quota: t("Common:Paid") }),
-      color: "#EDC409",
+      color: globalColors.favoritesStatus,
       access:
         roomType === -1
           ? EmployeeType.Collaborator
diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index 47ee244044..9370da04e7 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -29,7 +29,7 @@ import { Scrollbar } from "@docspace/shared/components/scrollbar";
 import { Link } from "@docspace/shared/components/link";
 import { desktop, mobile, tablet } from "@docspace/shared/utils";
 import { isMobile } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const PanelStyles = css`
   .panel_combo-box {
@@ -378,7 +378,7 @@ const StyledLinkRow = styled.div`
   .row_content {
     display: grid;
     grid-template-columns: 1fr 28px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .combo-button {
@@ -452,7 +452,7 @@ const StyledModalRowContainer = styled.div`
   }
 
   .embedding-panel_code-container {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {
@@ -472,7 +472,7 @@ const StyledModalRowContainer = styled.div`
     .embedding-panel_link {
       margin-inline-end: 8px;
 
-      border: 1px solid #eceef1;
+      border: ${(props) => props.theme.filesPanels.embedding.border};
       border-radius: 16px;
       line-height: 30px;
       padding: 4px 15px;
@@ -489,7 +489,7 @@ const StyledModalRowContainer = styled.div`
   }
 
   .embedding-panel_code-container {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 
   .embedding-panel_text {
diff --git a/packages/client/src/components/panels/UploadPanel/FileRow.js b/packages/client/src/components/panels/UploadPanel/FileRow.js
index da64cefb7f..befc595f47 100644
--- a/packages/client/src/components/panels/UploadPanel/FileRow.js
+++ b/packages/client/src/components/panels/UploadPanel/FileRow.js
@@ -121,6 +121,7 @@ const StyledFileRow = styled(Row)`
     }
 
     .enter-password {
+      color: ${(props) => props.theme.filesPanels.upload.color};
       margin-inline-end: 8px;
       text-decoration: underline dashed;
       cursor: pointer;
@@ -132,6 +133,7 @@ const StyledFileRow = styled(Row)`
   }
 
   .convert_icon {
+    color: ${(props) => props.theme.filesPanels.upload.iconFill};
     padding-inline-end: 12px;
   }
 
@@ -145,6 +147,18 @@ const StyledFileRow = styled(Row)`
       cursor: pointer;
     }
   }
+
+  .upload-panel-file-error_text {
+    ${(props) =>
+      props.isError &&
+      css`
+        color: ${props.theme.filesPanels.upload.color};
+      `}
+  }
+
+  .file-exst {
+    color: ${(props) => props.theme.filesPanels.upload.color};
+  }
 `;
 class FileRow extends Component {
   constructor(props) {
@@ -269,7 +283,7 @@ class FileRow extends Component {
     const { showPasswordInput, password, passwordValid } = this.state;
 
     const fileExtension = ext ? (
-      <Text as="span" fontWeight="600" color="#A3A9AE">
+      <Text as="span" fontWeight="600" className="file-exst">
         {ext}
       </Text>
     ) : (
@@ -295,14 +309,14 @@ class FileRow extends Component {
           isMediaActive={isMediaActive}
           showPasswordInput={showPasswordInput}
           withoutBorder
+          isError={item.error}
         >
           <>
             {item.fileId ? (
               isMedia || (isPlugin && onPluginClick) ? (
                 <Link
-                  className="upload-panel_file-row-link"
+                  className="upload-panel_file-row-link upload-panel-file-error_text"
                   fontWeight="600"
-                  color={item.error && "#A3A9AE"}
                   truncate
                   onClick={isMedia ? onMediaClick : onPluginClick}
                 >
@@ -312,11 +326,11 @@ class FileRow extends Component {
               ) : (
                 <div className="upload-panel_file-name">
                   <Link
+                    className="upload-panel-file-error_text"
                     onClick={() =>
                       onFileClick(item.fileInfo ? item.fileInfo.webUrl : "")
                     }
                     fontWeight="600"
-                    color={item.error && "#A3A9AE"}
                     truncate
                     // href={item.fileInfo ? item.fileInfo.webUrl : ""}
                     // target={downloadInCurrentTab ? "_self" : "_blank"}
@@ -328,7 +342,11 @@ class FileRow extends Component {
               )
             ) : (
               <div className="upload-panel_file-name">
-                <Text fontWeight="600" color={item.error && "#A3A9AE"} truncate>
+                <Text
+                  fontWeight="600"
+                  truncate
+                  className="upload-panel-file-error_text"
+                >
                   {name}
                   {fileExtension}
                 </Text>
diff --git a/packages/client/src/components/panels/UploadPanel/SubComponents/ActionsUploadedFile.js b/packages/client/src/components/panels/UploadPanel/SubComponents/ActionsUploadedFile.js
index 2791ece878..17e1a7220c 100644
--- a/packages/client/src/components/panels/UploadPanel/SubComponents/ActionsUploadedFile.js
+++ b/packages/client/src/components/panels/UploadPanel/SubComponents/ActionsUploadedFile.js
@@ -55,7 +55,6 @@ const ActionsUploadedFile = ({ item, onCancelCurrentUpload }) => {
             className="convert_icon"
             size="medium"
             isfill={true}
-            color="#A3A9AE"
           />
         </div>
       )}
diff --git a/packages/client/src/components/panels/UploadPanel/SubComponents/ErrorFileUpload.js b/packages/client/src/components/panels/UploadPanel/SubComponents/ErrorFileUpload.js
index 7cc9d6e3f8..4a58ce998b 100644
--- a/packages/client/src/components/panels/UploadPanel/SubComponents/ErrorFileUpload.js
+++ b/packages/client/src/components/panels/UploadPanel/SubComponents/ErrorFileUpload.js
@@ -70,7 +70,6 @@ const ErrorFileUpload = ({
           <Text
             className="enter-password"
             fontWeight="600"
-            color="#A3A9AE"
             onClick={onTextClick}
           >
             {showPasswordInput ? t("HideInput") : t("EnterPassword")}
diff --git a/packages/client/src/helpers/plugins/components/Plugin.js b/packages/client/src/helpers/plugins/components/Plugin.js
index 115bc54e38..9860d559d8 100644
--- a/packages/client/src/helpers/plugins/components/Plugin.js
+++ b/packages/client/src/helpers/plugins/components/Plugin.js
@@ -44,7 +44,7 @@ const StyledPlugin = styled.div`
     height: 1px;
     width: 100%;
 
-    background-color: #858585;
+    background-color: ${(props) => props.theme.plugins.color};
   }
 `;
 
diff --git a/packages/client/src/helpers/plugins/components/PluginInfo.js b/packages/client/src/helpers/plugins/components/PluginInfo.js
index 57a1251598..5eb4d4ea93 100644
--- a/packages/client/src/helpers/plugins/components/PluginInfo.js
+++ b/packages/client/src/helpers/plugins/components/PluginInfo.js
@@ -58,7 +58,7 @@ const StyledInfo = styled.div`
     gap: 16px;
 
     .row-name {
-      color: #858585;
+      color: ${(props) => props.theme.plugins.color};
     }
   }
 `;
diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js
index a770f522f9..698f27bfd5 100644
--- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js
+++ b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js
@@ -82,6 +82,7 @@ export const RegisterContainer = styled.div`
   width: 100%;
 
   .or-label {
+    color: ${(props) => props.theme.invitePage.textColor};
     margin: 0 8px;
   }
 
@@ -90,7 +91,7 @@ export const RegisterContainer = styled.div`
     display: flex;
     width: 100%;
     align-items: center;
-    color: ${(props) => props.theme.invitePage.borderColor};;
+    color: ${(props) => props.theme.invitePage.borderColor};
     padding-top: 35px;
     margin-bottom: 32px;
   }
diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js
index 5e5578ae9f..a4f89aa6d4 100644
--- a/packages/client/src/pages/Confirm/sub-components/createUser.js
+++ b/packages/client/src/pages/Confirm/sub-components/createUser.js
@@ -709,9 +709,7 @@ const CreateUserForm = (props) => {
             {!emailFromLink && (oauthDataExists() || ssoExists()) && (
               <>
                 <div className="line">
-                  <Text color="#A3A9AE" className="or-label">
-                    {t("Common:orContinueWith")}
-                  </Text>
+                  <Text className="or-label">{t("Common:orContinueWith")}</Text>
                 </div>
                 <SocialButtonsGroup
                   providers={providers}
diff --git a/packages/client/src/pages/DebugInfo/index.js b/packages/client/src/pages/DebugInfo/index.js
index 4a5109aed8..16f2ff8fbe 100644
--- a/packages/client/src/pages/DebugInfo/index.js
+++ b/packages/client/src/pages/DebugInfo/index.js
@@ -45,7 +45,7 @@ const StyledModalDialog = styled(ModalDialog)`
     width: auto;
 
     /* Light theme. */
-    --color-border-default: #d0d7de;
+    --color-border-default: ${(props) => props.theme.dialogs.borderColor};
     --color-border-muted: hsla(210, 18%, 87%, 1);
 
     .modal-footer {
@@ -53,7 +53,7 @@ const StyledModalDialog = styled(ModalDialog)`
     }
 
     a {
-      color: #4781d1;
+      color: ${(props) => props.theme.dialogs.linkColor};
     }
 
     .debug-info-body,
diff --git a/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js b/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js
index cedd687cea..eff9cb82b3 100644
--- a/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js
+++ b/packages/client/src/pages/FormGallery/TilesView/StyledTileView.js
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import TileContent from "./sub-components/TileContent";
 import { ContextMenu } from "@docspace/shared/components/context-menu";
 
@@ -51,14 +51,17 @@ const StyledTile = styled.div`
   width: 100%;
   border: ${(props) => props.theme.filesSection.tilesView.tile.border};
   border-radius: 6px;
-  ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  ${(props) =>
+    props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) => props.isSelected && checkedStyle}
 
   &:before,
   &:after {
-    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+    ${(props) =>
+      props.showHotkeyBorder &&
+      `border-color: ${globalColors.lightSecondMain}`};
   }
 
   &:before,
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js b/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
index f697199a47..075027296e 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/gallery.js
@@ -26,14 +26,14 @@
 
 import styled from "styled-components";
 import { isMobileOnly } from "react-device-detect";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledGalleryThumbnail = styled.div`
   box-sizing: border-box;
   width: 100%;
   overflow: hidden;
   border-radius: 6px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   height: ${isMobileOnly ? "335px" : "346px"};
   border: ${(props) =>
     `solid 1px ${props.theme.infoPanel.gallery.borderColor}`};
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts b/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
index 33d9065c2d..e642791e66 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/groups.styled.ts
@@ -65,7 +65,7 @@ export const GroupsContent = styled.div<{}>`
 
       .email {
         max-width: 180px;
-        color: #a3a9ae;
+        color: ${(props) => props.theme.infoPanel.groups.textColor};
         font-size: 12px;
         line-height: 16px;
         font-style: normal;
@@ -83,7 +83,7 @@ export const GroupsContent = styled.div<{}>`
       margin-inline-start: auto;
       .group-manager-tag {
         white-space: nowrap;
-        color: #d0d5da;
+        color: ${(props) => props.theme.infoPanel.groups.tagColor};
         font-size: 12px;
         font-weight: 600;
         line-height: 16px;
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
index 890ecb92e8..6f60b742fe 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
@@ -38,6 +38,7 @@ import Badges from "@docspace/client/src/pages/Home/Section/AccountsBody/Badges"
 import { StyledAccountsItemTitle } from "../../styles/accounts";
 
 import { decode } from "he";
+import { globalColors } from "@docspace/shared/themes";
 
 const AccountsItemTitle = ({
   t,
@@ -114,8 +115,12 @@ const AccountsItemTitle = ({
               id="sso-badge-info-panel"
               className="sso-badge"
               label={t("Common:SSO")}
-              color={"#FFFFFF"}
-              backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
+              color={globalColors.white}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondGreen
+                  : globalColors.secondGreenDark
+              }
               fontSize={"9px"}
               fontWeight={800}
               noHover
@@ -133,8 +138,12 @@ const AccountsItemTitle = ({
               id="ldap-badge-info-panel"
               className="ldap-badge"
               label={t("Common:LDAP")}
-              color={"#FFFFFF"}
-              backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
+              color={globalColors.white}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondPurple
+                  : globalColors.secondPurpleDark
+              }
               fontSize={"9px"}
               fontWeight={800}
               noHover
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/GroupsItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/GroupsItemTitle.js
index bef8cb18a9..28c3cb61dc 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/GroupsItemTitle.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/GroupsItemTitle.js
@@ -36,6 +36,7 @@ import { inject, observer } from "mobx-react";
 import { decode } from "he";
 import { Badge } from "@docspace/shared/components/badge";
 import { Tooltip } from "@docspace/shared/components/tooltip";
+import { globalColors } from "@docspace/shared/themes";
 
 const GroupsItemTitle = ({
   t,
@@ -95,8 +96,8 @@ const GroupsItemTitle = ({
               id="ldap-badge-info-panel"
               className="ldap-badge"
               label={t("Common:LDAP")}
-              color={"#FFFFFF"}
-              backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
+              color={globalColors.white}
+              backgroundColor={globalColors.secondPurple}
               fontSize={"9px"}
               fontWeight={800}
               noHover
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
index d54dcc0ea3..2ea0f53231 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
@@ -26,6 +26,8 @@
 
 import { useState } from "react";
 import { inject, observer } from "mobx-react";
+import { useTheme } from "styled-components";
+
 import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
 import { StyledUser } from "../../styles/members";
 import { Avatar } from "@docspace/shared/components/avatar";
@@ -68,6 +70,8 @@ const User = ({
   if (!infoPanelSelection) return null;
   if (!user.displayName && !user.name && !user.email) return null;
 
+  const theme = useTheme();
+
   const security = infoPanelSelection ? infoPanelSelection.security : {};
   const isExpect = user.isExpect;
   const canInviteUserInRoomAbility = security?.EditAccess;
@@ -263,7 +267,7 @@ const User = ({
         fontSize="12px"
         noSelect
         truncate
-        color="#A3A9AE !important"
+        color={theme.infoPanel.members.subtitleColor}
         dir="auto"
       >
         {`${typeLabel} | ${user.email}`}
@@ -356,7 +360,7 @@ const User = ({
               fontSize="12px"
               noSelect
               truncate
-              color="#A3A9AE"
+              color={theme.infoPanel.members.subtitleColor}
               dir="auto"
             >
               {`${typeLabel} | ${user.email}`}
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js
index 10498a56fa..f51982c7cb 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js
@@ -25,26 +25,8 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
-
-import { commonIconsStyles } from "@docspace/shared/utils";
 import { Base } from "@docspace/shared/themes";
 
-const StyledCrossIcon = styled(CrossReactSvg)`
-  ${commonIconsStyles}
-
-  g {
-    path {
-      fill: #657077;
-    }
-  }
-
-  path {
-    fill: #999976;
-  }
-`;
-
 const LinksBlock = styled.div`
   display: flex;
   height: 100%;
@@ -158,4 +140,4 @@ export const StyledPublicRoomBarContainer = styled.div`
 
 StyledLinkRow.defaultProps = { theme: Base };
 
-export { StyledCrossIcon, LinksBlock, StyledLinkRow };
+export { LinksBlock, StyledLinkRow };
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Badges.js b/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
index 806723528c..97dbc751bf 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
@@ -31,7 +31,7 @@ import { withTranslation } from "react-i18next";
 import { useNavigate, useLocation } from "react-router-dom";
 
 import { PaymentsType, AccountLoginType } from "@docspace/shared/enums";
-
+import { globalColors } from "@docspace/shared/themes";
 import { Badge } from "@docspace/shared/components/badge";
 import { commonIconsStyles } from "@docspace/shared/utils";
 
@@ -61,13 +61,13 @@ const StyledPaidBadge = styled(Badge)`
 const StyledSendClockIcon = styled(SendClockIcon)`
   ${commonIconsStyles}
   path {
-    fill: #a3a9ae;
+    fill: ${(props) => props.theme.accountsBadges.pendingColor};
   }
 `;
 const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
   ${commonIconsStyles}
   path {
-    fill: #f21c0e;
+    fill: ${(props) => props.theme.accountsBadges.disabledColor};
   }
 `;
 
@@ -116,8 +116,12 @@ const Badges = ({
         <Badge
           className="accounts-badge"
           label={t("Common:LDAP")}
-          color={"#FFFFFF"}
-          backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
+          color={globalColors.white}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.secondPurple
+              : globalColors.secondPurpleDark
+          }
           fontSize={"9px"}
           fontWeight={800}
           noHover
@@ -129,8 +133,12 @@ const Badges = ({
         <Badge
           className="accounts-badge"
           label={t("SSO")}
-          color={"#FFFFFF"}
-          backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
+          color={globalColors.white}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.secondGreen
+              : globalColors.secondGreenDark
+          }
           fontSize={"9px"}
           fontWeight={800}
           noHover
@@ -142,7 +150,11 @@ const Badges = ({
         <StyledPaidBadge
           className="paid-badge accounts-badge"
           label={t("Paid")}
-          backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.favoritesStatus
+              : globalColors.favoriteStatusDark
+          }
           fontSize={"9px"}
           fontWeight={800}
           lineHeight={"13px"}
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
index d3836b0f73..3c4f69658d 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
@@ -28,7 +28,7 @@ import styled, { css } from "styled-components";
 import { RowContainer } from "@docspace/shared/components/row-container";
 import { isMobile, isTablet } from "react-device-detect";
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { mobile, tablet } from "@docspace/shared/utils/device";
 import { RowContent } from "@docspace/shared/components/row-content";
 
@@ -142,7 +142,7 @@ export const GroupsRow = styled(Row)`
 
   position: unset;
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   .styled-element {
     height: 32px;
     margin-inline-end: 12px;
@@ -156,8 +156,9 @@ export const GroupsRow = styled(Row)`
     font-size: 12px;
     font-weight: 700;
     line-height: 16px;
-    background: #eceef1;
-    color: #333;
+    background: ${(props) =>
+      props.theme.filesSection.tableView.row.backgroundGroup};
+    color: ${(props) => props.theme.filesSection.tableView.row.color};
     border-radius: 50%;
   }
 `;
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
index be0209ee8f..6923f688a6 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
@@ -34,6 +34,7 @@ import * as Styled from "./index.styled";
 import { Text } from "@docspace/shared/components/text";
 import { Avatar } from "@docspace/shared/components/avatar";
 import Badges from "../../Badges";
+import { globalColors } from "@docspace/shared/themes";
 
 const GroupsTableItem = ({
   t,
@@ -147,7 +148,7 @@ const GroupsTableItem = ({
               fontSize="13px"
               isTextOverflow
               className="table-cell_group-manager"
-              color={"#A3A9AE"}
+              color={globalColors.gray}
               dir="auto"
             >
               {item.manager?.displayName}
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js
index 02fac9c2bf..9cd23a86b9 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
@@ -112,7 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
   `}
 
   position: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .styled-element {
     height: 32px;
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
index 2b69becf40..394daad855 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
 import { Row } from "@docspace/shared/components/row";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
@@ -112,8 +112,7 @@ const StyledSimpleUserRow = styled(Row)`
   `}
 
   position: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   .styled-element {
     height: 32px;
     margin-inline-end: 12px;
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
index 6cc8580602..1dd8f5e70e 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@@ -44,7 +44,7 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
 import withBadges from "../../../../../HOCs/withBadges";
 import ItemIcon from "../../../../../components/ItemIcon";
 import marginStyles from "./CommonStyles";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import CursorPalmReactSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
 
@@ -89,7 +89,7 @@ const StyledWrapper = styled.div`
   ${(props) =>
     props.showHotkeyBorder &&
     css`
-      border-color: #2da7db !important;
+      border-color: ${globalColors.lightSecondMain} !important;
       z-index: 1;
       position: relative;
 
@@ -142,7 +142,7 @@ const StyledSimpleFilesRow = styled(Row)`
       }
   `}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .styled-element {
     height: 32px;
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
index e1d424da6b..d2744e19b8 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@@ -25,14 +25,18 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import Base from "@docspace/shared/themes/base";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { TableRow } from "@docspace/shared/components/table";
 import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
 import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
 
 const hotkeyBorderStyle = css`
   border-image-slice: 1;
-  border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
+  border-image-source: linear-gradient(
+    to left,
+    ${globalColors.lightSecondMain} 24px,
+    ${globalColors.lightSecondMain} 24px
+  );
 `;
 
 const rowCheckboxDraggingStyle = css`
@@ -128,7 +132,7 @@ const StyledTableRow = styled(TableRow)`
       props.showHotkeyBorder &&
       css`
         z-index: 1;
-        border-color: #2da7db !important;
+        border-color: ${globalColors.lightSecondMain} !important;
       `}
   }
 
@@ -334,7 +338,7 @@ const StyledQuickButtonsContainer = styled.div`
       fill: ${(props) =>
         props.theme.filesSection.tableView.row.shareHoverColor};
     }
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
index 7990a2733b..13f9de8259 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
@@ -31,6 +31,7 @@ import React, { useState } from "react";
 import { StyledText } from "./CellStyles";
 import { getFolderPath } from "@docspace/shared/api/files";
 import { CategoryType } from "@docspace/client/src/helpers/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const RoomCell = ({ sideColor, item }) => {
   const { originRoomTitle, originId, originTitle } = item;
@@ -78,7 +79,7 @@ const RoomCell = ({ sideColor, item }) => {
       getContent={() => (
         <span>
           {isTooltipLoading ? (
-            <Loader color="#333333" size="12px" type="track" />
+            <Loader color={globalColors.black} size="12px" type="track" />
           ) : (
             path.map((pathPart, i) => (
               <Text key={pathPart.id} isBold={i === 0} isInline fontSize="12px">
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
index a1ef6bcbe3..f7229deb52 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -36,7 +36,7 @@ import { isMobile } from "react-device-detect";
 import { withTheme } from "styled-components";
 import { Link } from "@docspace/shared/components/link";
 import { Loader } from "@docspace/shared/components/loader";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { Tags } from "@docspace/shared/components/tags";
 import { Tag } from "@docspace/shared/components/tag";
 import { getRoomTypeName } from "SRC_DIR/helpers/filesUtils";
@@ -154,10 +154,11 @@ const StyledTile = styled.div`
     isRooms
       ? theme.filesSection.tilesView.tile.roomsBorderRadius
       : theme.filesSection.tilesView.tile.borderRadius};
-  ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+  ${(props) =>
+    props.showHotkeyBorder && `border-color: ${globalColors.lightSecondMain}`};
   ${(props) =>
     props.isFolder && !props.isRooms && "border-start-start-radius: 6px;"}
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) => props.isFolder && (props.isRoom ? roomsStyles : FlexBoxStyles)};
   ${(props) => (props.isFolder ? FolderStyles : FileStyles)};
@@ -200,7 +201,9 @@ const StyledTile = styled.div`
 
   &:before,
   &:after {
-    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
+    ${(props) =>
+      props.showHotkeyBorder &&
+      `border-color: ${globalColors.lightSecondMain}`};
   }
 
   &:before,
@@ -468,7 +471,7 @@ const StyledIcons = styled.div`
     background: ${(props) =>
       props.theme.filesSection.tilesView.tile.backgroundBadgeColor};
     border-radius: 4px;
-    box-shadow: 0px 2px 4px rgba(4, 15, 27, 0.16);
+    box-shadow: 0px 2px 4px ${globalColors.badgeShadow};
   }
 `;
 
diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js
index 5da84d1df1..4442ac43e5 100644
--- a/packages/client/src/pages/Home/Section/Header/index.js
+++ b/packages/client/src/pages/Home/Section/Header/index.js
@@ -50,6 +50,7 @@ import {
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -58,7 +59,7 @@ const StyledContainer = styled.div`
   .table-container_group-menu {
     margin-block: 0;
     margin-inline: -20px 0;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     width: calc(100% + 40px);
     height: 68px;
diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
index ae82bbf023..7ec9e58b9e 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@@ -40,6 +40,7 @@ import LoaderSectionHeader from "../loaderSectionHeader";
 import { mobile, tablet, desktop, isMobile } from "@docspace/shared/utils";
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
 import {
   getKeyByLink,
   settingsTree,
@@ -349,7 +350,11 @@ const SectionHeaderContent = (props) => {
               <div className="header">{translatedHeader}</div>
               {isNeedPaidIcon ? (
                 <Badge
-                  backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.favoritesStatus
+                      : globalColors.favoriteStatusDark
+                  }
                   label={t("Common:Paid")}
                   fontWeight="700"
                   className="settings-section_badge"
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
index 2cba751e44..99048a1e1d 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js
@@ -68,12 +68,14 @@ const StyledComponent = styled.div`
     margin-inline-end: 12px;
     border-radius: 8px;
     cursor: pointer;
-    background: ${(props) => (props.theme.isBase ? "#eceef1" : "#474747")}
+    background: ${(props) =>
+        props.theme.client.settings.common.appearance.themeAddBackground}
       url(${PlusThemeSvgUrl}) no-repeat center;
   }
 
   .add-theme {
-    background: #d0d5da;
+    background: ${(props) =>
+      props.theme.client.settings.common.appearance.addThemeBackground};
     padding-top: 16px;
     padding-inline-start: 16px;
     box-sizing: border-box;
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
index 14bbb639f3..d1f5418253 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledPreview.js
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledComponent = styled.div`
   display: inline-flex;
@@ -40,7 +40,9 @@ const StyledComponent = styled.div`
 
     height: 100%;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#f8f9f9" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.grayLight
+        : globalColors.darkGrayLight};
     ${(props) =>
       props.withBorder &&
       css`
@@ -63,7 +65,9 @@ const StyledComponent = styled.div`
     width: 20px;
     height: 1px;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#eceef1" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayLightMid
+        : globalColors.grayDarkStrong};
     margin: 0 20px 31px;
   }
 
@@ -75,7 +79,8 @@ const StyledComponent = styled.div`
 
     circle {
       fill: ${(props) => props.colorPreview};
-      stroke: ${(props) => props.themePreview === "Dark" && "#292929"};
+      stroke: ${(props) =>
+        props.themePreview === "Dark" && globalColors.darkGrayLight};
     }
   }
 
@@ -115,7 +120,7 @@ const StyledComponent = styled.div`
         border-inline-start-style: none;
       `}
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFFFFF" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
   }
 
   .section-header {
@@ -169,7 +174,7 @@ const StyledComponent = styled.div`
   .color-badge rect {
     fill: ${(props) =>
       props.themePreview === "Dark" && props.selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : props.colorPreview} !important;
   }
 
@@ -177,7 +182,7 @@ const StyledComponent = styled.div`
     fill: ${(props) =>
       props.themePreview === "Light"
         ? `${props.colorPreview} !important`
-        : `#FFFFFF !important`};
+        : `${globalColors.white} !important`};
   }
 
   .menu-section {
@@ -193,7 +198,9 @@ const StyledComponent = styled.div`
 
   .loaders-theme {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#858585"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 3px;
   }
 
@@ -227,7 +234,7 @@ const StyledComponent = styled.div`
     padding-top: 9px;
     padding-bottom: 9px !important;
     background: ${(props) =>
-      props.themePreview === "Light" ? "#f0f0f0" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
   }
 
   .section-tile {
@@ -237,7 +244,9 @@ const StyledComponent = styled.div`
 
   .border-color {
     border-color: ${(props) =>
-      props.themePreview === "Light" ? "#d0d5da" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDarkStrong};
   }
 
   .tile {
@@ -250,7 +259,9 @@ const StyledComponent = styled.div`
 
   .background {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
   }
 
   .tile-name {
@@ -314,7 +325,7 @@ const StyledComponent = styled.div`
       fill: ${(props) =>
         props.themePreview === "Light"
           ? `${props.colorPreview} !important`
-          : `#FFFFFF !important`};
+          : `${globalColors.white} !important`};
     }
   }
 
@@ -323,7 +334,7 @@ const StyledComponent = styled.div`
   }
 
   .main-button_text {
-    color: #ffffff !important;
+    color: ${globalColors.white} !important;
   }
 `;
 
@@ -339,7 +350,7 @@ const StyledFloatingButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+  box-shadow: 0px 12px 40px ${globalColors.popupShadow};
 `;
 
 StyledFloatingButton.defaultProps = { theme: Base };
@@ -361,10 +372,12 @@ const StyledMobilePreview = styled.div`
   border-radius: 16px;
   padding: 0px 16px;
   background: ${({ themePreview }) =>
-    themePreview === "Light" ? "#FFFFFF" : "#333333"};
+    themePreview === "Light" ? globalColors.white : globalColors.black};
 
   border: ${({ themePreview }) =>
-    themePreview === "Light" ? "1px solid #d0d5da" : "1px solid #474747"};
+    themePreview === "Light"
+      ? `1px solid ${globalColors.grayStrong}`
+      : `1px solid ${globalColors.grayDarkStrong}`};
 
   .section-search {
     height: 30px;
@@ -390,7 +403,7 @@ const StyledMobilePreview = styled.div`
   .color-badge rect {
     fill: ${(props) =>
       props.themePreview === "Dark" && props.selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : props.colorPreview} !important;
   }
 
@@ -398,7 +411,7 @@ const StyledMobilePreview = styled.div`
     fill: ${(props) =>
       props.themePreview === "Light"
         ? `${props.colorPreview} !important`
-        : `#FFFFFF !important`};
+        : `${globalColors.white} !important`};
   }
 
   .menu-section {
@@ -409,33 +422,41 @@ const StyledMobilePreview = styled.div`
 
   .loaders-theme {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#545454"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 3px;
   }
 
   .loaders-tile-theme {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#F1F1F1" : "#333333"};
+      props.themePreview === "Light" ? globalColors.white : globalColors.black};
 
     border-radius: 3px;
   }
 
   .loaders-tile-text-theme {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#D0D5DA" : "#858585"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDark};
 
     border-radius: 3px;
   }
 
   .loaders-theme-avatar {
     background-color: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#545454"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.grayDark};
     border-radius: 50px;
   }
 
   .border-color {
     border-color: ${(props) =>
-      props.themePreview === "Light" ? "#d0d5da" : "#474747"};
+      props.themePreview === "Light"
+        ? globalColors.grayStrong
+        : globalColors.grayDarkStrong};
   }
 
   .tile {
@@ -448,7 +469,9 @@ const StyledMobilePreview = styled.div`
 
   .background {
     background: ${(props) =>
-      props.themePreview === "Light" ? "#FFF" : "#292929"};
+      props.themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
   }
 
   .tile-name {
@@ -504,7 +527,7 @@ const StyledMobilePreview = styled.div`
       fill: ${(props) =>
         props.themePreview === "Light"
           ? `${props.colorPreview} !important`
-          : `#FFFFFF !important`};
+          : `${globalColors.white} !important`};
     }
   }
 
@@ -523,7 +546,9 @@ const StyledMobilePreview = styled.div`
     padding: 0 16px;
 
     background: ${({ themePreview }) =>
-      themePreview === "Light" ? "#FFFFFF" : "#282828"};
+      themePreview === "Light"
+        ? globalColors.white
+        : globalColors.darkGrayLight};
 
     border-radius: 16px 16px 0px 0px;
   }
@@ -541,7 +566,7 @@ const StyledMobilePreview = styled.div`
   .color-badge rect {
     fill: ${({ themePreview, selectThemeId, colorPreview }) =>
       themePreview === "Dark" && selectThemeId === 7
-        ? "#FFFFFF"
+        ? globalColors.white
         : colorPreview} !important;
   }
   .section-badge {
@@ -562,7 +587,8 @@ const StyledMobilePreview = styled.div`
   .icon-button_svg {
     svg {
       path {
-        fill: #a3a9ae;
+        fill: ${(props) =>
+          props.theme.client.settings.common.appearance.iconFill};
       }
     }
   }
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
index c32ce0948b..2eb983623a 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
@@ -40,6 +40,7 @@ import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 
 import { isMobile, isTablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const Preview = (props) => {
   const {
@@ -366,8 +367,21 @@ const Preview = (props) => {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <rect x="4" y="6" width="20" height="20" rx="2" fill="#11A3D4" />
-              <circle cx="24" cy="6" r="5" fill="#11A3D4" stroke="#F8F9F9" />
+              <rect
+                x="4"
+                y="6"
+                width="20"
+                height="20"
+                rx="2"
+                fill={globalColors.secondBlue}
+              />
+              <circle
+                cx="24"
+                cy="6"
+                r="5"
+                fill={globalColors.secondBlue}
+                stroke={globalColors.grayLight}
+              />
             </svg>
             <RectangleSkeleton
               animate={false}
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
index 6cb33aed04..56268634b3 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
@@ -37,7 +37,7 @@ import { TextInput } from "@docspace/shared/components/text-input";
 import { Button } from "@docspace/shared/components/button";
 import { Badge } from "@docspace/shared/components/badge";
 import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
-
+import { globalColors } from "@docspace/shared/themes";
 import WhiteLabelWrapper from "./StyledWhitelabel";
 import Logo from "./sub-components/logo";
 
@@ -68,7 +68,11 @@ const CommonWhiteLabel = ({
         {!isSettingPaid && (
           <Badge
             className="paid-badge"
-            backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
             label={t("Common:Paid")}
             isPaidBadge={true}
           />
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
index 336c5a956e..4eebc91f82 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js
@@ -49,13 +49,18 @@ import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 const StyledComponent = styled.div`
   .link {
     font-weight: 600;
-    border-bottom: 1px dashed #333333;
-    border-color: ${(props) => !props.isSettingPaid && "#A3A9AE"};
+    border-bottom: ${(props) =>
+      props.theme.client.settings.common.companyInfo.border};
+    border-color: ${(props) =>
+      !props.isSettingPaid &&
+      props.theme.client.settings.common.companyInfo.color};
   }
 
   .description,
   .link {
-    color: ${(props) => !props.isSettingPaid && "#A3A9AE"};
+    color: ${(props) =>
+      !props.isSettingPaid &&
+      props.theme.client.settings.common.companyInfo.color};
   }
 
   .text-input {
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
index 2f76e333c4..c600ec5de4 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
@@ -39,7 +39,7 @@ import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-butto
 import { toastr } from "@docspace/shared/components/toast";
 import { isManagement } from "@docspace/shared/utils/common";
 import { size } from "@docspace/shared/utils";
-
+import { globalColors } from "@docspace/shared/themes";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
 import WhiteLabelWrapper from "./StyledWhitelabel";
 import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
@@ -177,7 +177,7 @@ const WhiteLabelComponent = (props) => {
         options.height,
         options.text,
         options.fontSize,
-        isDocsEditorName ? "#fff" : "#000",
+        isDocsEditorName ? globalColors.white : globalColors.darkBlack,
         options.alignCenter,
         options.isEditor,
       );
@@ -186,7 +186,7 @@ const WhiteLabelComponent = (props) => {
         options.height,
         options.text,
         options.fontSize,
-        "#fff",
+        globalColors.white,
         options.alignCenter,
         options.isEditor,
       );
@@ -289,7 +289,11 @@ const WhiteLabelComponent = (props) => {
           <Badge
             className="paid-badge"
             fontWeight="700"
-            backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
             label={t("Common:Paid")}
             isPaidBadge={true}
           />
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js
index d2a8e0f87c..1857c29fed 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/StyledSettings.js
@@ -79,6 +79,10 @@ const StyledSettingsComponent = styled.div`
     ${(props) => props.standalone && "margin-top: 14px"};
   }
 
+  .dns-error-text {
+    color: ${(props) => props.theme.client.settings.common.dns.errorColor};
+  }
+
   .combo-button-label {
     max-width: 100%;
     font-weight: 400;
@@ -92,7 +96,7 @@ const StyledSettingsComponent = styled.div`
   .errorText {
     position: absolute;
     font-size: 10px;
-    color: #f21c0e;
+    color: ${(props) => props.theme.client.settings.common.dns.errorColor};
   }
 
   .settings-block__wrapper-language {
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
index 45cf5c7913..f1a4cc1cc8 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
@@ -48,6 +48,7 @@ import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
 import { DeviceType } from "@docspace/shared/enums";
 import { parseDomain } from "@docspace/shared/utils/common";
+import { globalColors } from "@docspace/shared/themes";
 
 const toggleStyle = {
   position: "static",
@@ -213,10 +214,10 @@ const DNSSettingsComponent = (props) => {
             {errorText &&
               errorText.map((err, index) => (
                 <Text
+                  className="dns-error-text"
                   key={index}
                   fontSize="12px"
                   fontWeight="400"
-                  color="#F24724"
                 >
                   {err}
                 </Text>
@@ -227,7 +228,7 @@ const DNSSettingsComponent = (props) => {
               key="dns-hint"
               fontSize="12px"
               fontWeight="400"
-              color="#A3A9AE"
+              color={globalColors.gray}
             >
               {`${t("Settings:DNSSettingsHint")}${domainExampleText}`}
             </Text>
@@ -290,7 +291,11 @@ const DNSSettingsComponent = (props) => {
             <Badge
               className="paid-badge"
               fontWeight="700"
-              backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.favoritesStatus
+                  : globalColors.favoriteStatusDark
+              }
               label={t("Common:Paid")}
               isPaidBadge={true}
             />
diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
index 519710dc2a..cafd95d1bb 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
@@ -54,6 +54,7 @@ import { isMobile } from "@docspace/shared/utils";
 import { DeviceType } from "@docspace/shared/enums";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { ColorPicker } from "@docspace/shared/components/color-picker";
+import { globalColors } from "@docspace/shared/themes";
 
 const Appearance = (props) => {
   const {
@@ -469,8 +470,8 @@ const Appearance = (props) => {
   ]);
 
   const getTextColor = (color) => {
-    const black = "#333333";
-    const white = "#FFFFFF";
+    const black = globalColors.black;
+    const white = globalColors.white;
 
     const rgba = hexRgb(color);
 
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
index 7d3b536d05..73a032da76 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js
@@ -32,6 +32,7 @@ import { Button } from "@docspace/shared/components/button";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";
 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledComponent = styled(ModalDialog)`
   .modal-dialog-aside-footer {
@@ -39,7 +40,7 @@ const StyledComponent = styled(ModalDialog)`
     bottom: 0 !important;
     inset-inline-start: 0;
     padding: 16px;
-    box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
+    box-shadow: 0px 12px 40px ${globalColors.popupShadow};
   }
 
   .new-colors-container {
@@ -54,10 +55,12 @@ const StyledComponent = styled(ModalDialog)`
       padding-bottom: 20px;
     }
 
-    ${!isMobile() &&
-    css`
-      max-width: 448px;
-    `}
+    ${
+      !isMobile() &&
+      css`
+        max-width: 448px;
+      `
+    }
   }
 
   .name-color {
@@ -74,19 +77,13 @@ const StyledComponent = styled(ModalDialog)`
     background: ${(props) =>
       props.currentColorAccent
         ? props.currentColorAccent
-        : props.theme.isBase
-          ? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
-          : `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
-  }
+        : `${props.theme.client.settings.common.appearance.accentBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
 
   .buttons-box {
     background: ${(props) =>
       props.currentColorButtons
         ? props.currentColorButtons
-        : props.theme.isBase
-          ? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
-          : `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
-  }
+        : `${props.theme.client.settings.common.appearance.buttonBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
 
   .modal-add-theme {
     width: 46px;
@@ -96,34 +93,40 @@ const StyledComponent = styled(ModalDialog)`
   }
 
   .drop-down-container-hex {
-    ${isMobileOnly &&
-    css`
-      width: 100%;
-    `}
+    ${
+      isMobileOnly &&
+      css`
+        width: 100%;
+      `
+    }
   }
 
   .drop-down-item-hex {
-    ${isMobileOnly &&
-    css`
-      width: calc(100vw - 32px);
-    `}
+    ${
+      isMobileOnly &&
+      css`
+        width: calc(100vw - 32px);
+      `
+    }
 
     :hover {
       background-color: unset;
     }
 
-    ${!isMobile() &&
-    css`
-      max-width: 227px;
+    ${
+      !isMobile() &&
+      css`
+        max-width: 227px;
 
-      .hex-color-picker {
-        max-width: 195px;
-      }
+        .hex-color-picker {
+          max-width: 195px;
+        }
 
-      .react-colorful__interactive {
-        max-width: 183px;
-      }
-    `}
+        .react-colorful__interactive {
+          max-width: 183px;
+        }
+      `
+    }
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.ts b/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.ts
index 3f4537e536..284b2ce0a0 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.ts
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/StyledDataImport.ts
@@ -28,7 +28,7 @@ import styled from "styled-components";
 import { tablet, mobile } from "@docspace/shared/utils/device";
 
 import { TableContainer } from "@docspace/shared/components/table";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 export const WorkspacesContainer = styled.div`
   max-width: 700px;
@@ -78,7 +78,7 @@ export const WorkspacesContainer = styled.div`
     cursor: pointer;
 
     &:hover {
-      border-color: #4781d1;
+      border-color: ${globalColors.lightBlueMain};
     }
 
     &:active {
@@ -153,7 +153,7 @@ export const UsersInfoBlock = styled.div`
   display: flex;
   align-items: center;
   max-width: 660px;
-  background: #f8f9f9;
+  background: ${(props) => props.theme.client.settings.migration.background};
   padding: 12px 16px;
   border-radius: 6px;
   margin: 16px 0;
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx
index 04e083cc73..e8e20a10d9 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/RowView/UsersRowContent.tsx
@@ -43,7 +43,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
 import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
 import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import EmailChangeDialog from "SRC_DIR/components/dialogs/EmailChangeDialog";
 import {
@@ -188,7 +188,12 @@ const UsersRowContent = (props: AddEmailRowContentProps) => {
         <Text fontWeight={600} fontSize="14px">
           {displayName}
         </Text>
-        <Text className="user-email">
+        <Text
+          className="user-email"
+          fontWeight={600}
+          fontSize="12px"
+          color={globalColors.gray}
+        >
           {prevEmail === "" ? t("Settings:NoEmail") : prevEmail}
         </Text>
       </div>
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/UsersTableRow.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/UsersTableRow.tsx
index f21dafd6d6..d95c9507d0 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/UsersTableRow.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/AddEmailsStep/AccountsTable/TableView/UsersTableRow.tsx
@@ -40,7 +40,7 @@ import EditSvg from "PUBLIC_DIR/images/access.edit.react.svg";
 import CrossSvg from "PUBLIC_DIR/images/cross.edit.react.svg";
 import CheckSvg from "PUBLIC_DIR/images/check.edit.react.svg";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 import { InputType } from "@docspace/shared/components/text-input";
 import { TValidate } from "@docspace/shared/components/email-input/EmailInput.types";
@@ -232,7 +232,7 @@ const UsersTableRow = (props: AddEmailTableRowProps) => {
         ) : (
           <span onClick={openEmail} className="user-email" ref={emailTextRef}>
             <EditSvg />
-            <Text className="user-email" truncate>
+            <Text color={globalColors.gray} className="user-email" truncate>
               {prevEmail !== "" ? prevEmail : t("Settings:NoEmail")}
             </Text>
           </span>
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx
index 6ec00900d7..ebfcca7ec7 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx
@@ -100,9 +100,9 @@ const Providers = (props: ProvidersProps) => {
           >
             <ReactSVG src={workspace.logo} className="workspace-logo" />
             <Link
+              className="link"
               type={LinkType.page}
               fontWeight="600"
-              color="#4781D1"
               isHovered
               isTextOverflow
             >
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/AccountsTable/RowView/index.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/AccountsTable/RowView/index.tsx
index 332596d400..1043b6150d 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/AccountsTable/RowView/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersStep/AccountsTable/RowView/index.tsx
@@ -38,6 +38,7 @@ import { Row } from "@docspace/shared/components/row";
 import { Text } from "@docspace/shared/components/text";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
 import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 import { TEnhancedMigrationUser } from "@docspace/shared/api/settings/types";
 import UsersRow from "./UsersRow";
 import { InjectedRowViewProps, RowViewProps } from "../../../../types";
@@ -45,6 +46,56 @@ import { InjectedRowViewProps, RowViewProps } from "../../../../types";
 const StyledRowContainer = styled(RowContainer)`
   margin: 0 0 20px;
 
+  .table-group-menu {
+    height: 61px;
+    position: sticky;
+    z-index: 201;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-right: -16px;
+          `
+        : css`
+            margin-left: -16px;
+          `}
+    width: 100%;
+
+    margin-top: 20px;
+    top: 61px;
+    margin-bottom: -29.5px;
+
+    .table-container_group-menu {
+      padding: 0px 16px;
+      border-image-slice: 0;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
+    }
+
+    .table-container_group-menu-checkbox {
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl"
+          ? css`
+              margin-right: 8px;
+            `
+          : css`
+              margin-left: 8px;
+            `}
+    }
+
+    .table-container_group-menu-separator {
+      margin: 0 16px;
+    }
+  }
+
+  .header-container-text {
+    font-size: 12px;
+    color: ${(props) =>
+      props.theme.client.settings.migration.tableRowTextColor};
+  }
+
+  .table-container_header {
+    position: absolute;
+  }
+
   .clear-icon {
     margin-inline-end: 8px;
   }
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/RowView/index.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/RowView/index.tsx
index df67bc9b59..10a1ee8c1c 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/RowView/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/RowView/index.tsx
@@ -39,6 +39,7 @@ import { Text } from "@docspace/shared/components/text";
 import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
 import ClearEmptyFilterSvgUrl from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 import UsersRow from "./UsersRow";
 import {
   InjectedTypeSelectRowViewProps,
@@ -62,7 +63,7 @@ const StyledRowContainer = styled(RowContainer)`
     .table-container_group-menu {
       padding: 0px 16px;
       border-image-slice: 0;
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
     }
 
     .table-container_group-menu-checkbox {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/TableView/index.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/TableView/index.tsx
index 768b290694..314bbe43ed 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/TableView/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/components/SelectUsersTypeStep/AccountsTable/TableView/index.tsx
@@ -26,7 +26,7 @@
 
 import { useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import styled from "styled-components";
 
 import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
@@ -67,7 +67,7 @@ const UserSelectTableContainer = styled(StyledTableContainer)`
       border-image-source: none;
       border-bottom: ${(props) =>
         props.theme.client.settings.migration.workspaceBorder};
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      box-shadow: ${globalColors.menuShadow} 0px 15px 20px;
       padding: 0px;
     }
 
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/DataImportLoader.tsx b/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/DataImportLoader.tsx
index 8bc0581ba0..97c7bee48f 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/DataImportLoader.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/sub-components/DataImportLoader.tsx
@@ -65,6 +65,35 @@ const StyledLoader = styled.div`
     justify-content: flex-start;
     flex-wrap: wrap;
     gap: 20px;
+
+    .link {
+      color: ${(props) => props.theme.client.settings.migration.linkColor};
+    }
+  }
+
+  .workspace-item {
+    background: ${(props) =>
+      props.theme.client.settings.migration.workspaceBackground};
+    border: ${(props) => props.theme.client.settings.migration.workspaceBorder};
+    border-radius: 6px;
+    width: 340px;
+    height: 64px;
+    box-sizing: border-box;
+    padding: 12px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    &:hover {
+      border-color: ${(props) =>
+        props.theme.client.settings.migration.workspaceHover};
+    }
+
+    &:active {
+      background-color: ${(props) =>
+        props.theme.client.settings.migration.workspaceBackground};
+    }
     max-width: 700px;
 
     @media ${tablet} {
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
index cb03b791e9..11f634d1a2 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js
@@ -31,6 +31,7 @@ import {
 } from "../../../utils/commonSettingsStyles";
 
 import { tablet, mobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const INPUT_LENGTH = "350px";
 const TEXT_LENGTH = "700px";
@@ -111,7 +112,7 @@ const commonStyles = css`
     max-width: fit-content;
     font-size: 12px;
     line-height: 15px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   }
 `;
 
@@ -345,7 +346,7 @@ const StyledRestoreBackup = styled.div`
 const StyledModules = styled.div`
   margin-bottom: 24px;
   .backup-description {
-    ${(props) => props.isDisabled && `color: #A3A9AE`};
+    ${(props) => props.isDisabled && `color: ${globalColors.gray};`};
     margin-inline-start: 25px;
     max-width: 700px;
   }
@@ -523,7 +524,7 @@ const StyledBackupList = styled.div`
     margin-top: -3px;
     grid-area: trash;
     path {
-      fill: #a3a9ae;
+      fill: ${globalColors.gray};
     }
   }
   .backup-list_icon {
@@ -537,7 +538,7 @@ const StyledBackupList = styled.div`
     white-space: nowrap;
   }
   .backup-list_file-exst {
-    color: #a3a9ae;
+    color: ${globalColors.gray};
     grid-area: ext;
   }
   .backup-list_radio-button {
@@ -591,7 +592,7 @@ const StyledSettingsHeader = styled.div`
   -ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
   -webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
   -o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-  background-color: #fff;
+  background-color: ${globalColors.white};
   z-index: 149;
   width: 100%;
   height: 50px;
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
index fc74725cc3..ab44ce983d 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
@@ -59,6 +59,7 @@ import { Link } from "@docspace/shared/components/link";
 import { getSettingsThirdParty } from "@docspace/shared/api/files";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { isManagement } from "@docspace/shared/utils/common";
+import { globalColors } from "@docspace/shared/themes";
 
 const { DocumentModuleType, ResourcesModuleType, StorageModuleType } =
   BackupStorageType;
@@ -505,7 +506,11 @@ class AutomaticBackup extends React.PureComponent {
               </Text>
               {!isEnableAuto && (
                 <Badge
-                  backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.favoritesStatus
+                      : globalColors.favoriteStatusDark
+                  }
                   label={t("Common:Paid")}
                   fontWeight="700"
                   className="auto-backup_badge"
diff --git a/packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js b/packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js
index 41418914b1..ca4de26d45 100644
--- a/packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js
+++ b/packages/client/src/pages/PortalSettings/categories/delete-data/StyledDeleteData.js
@@ -33,7 +33,7 @@ export const DeleteDataLayout = styled.div`
   hr {
     margin: 24px 0;
     border: none;
-    border-top: 1px solid #eceef1;
+    border-top: ${(props) => props.theme.client.settings.deleteData.borderTop};
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
index 44b9789957..3458f2fe06 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
@@ -46,7 +46,7 @@ export const SDKContainer = styled(Box)`
 
   .linkHelp {
     display: inline;
-    color: "#657077";
+    color: ${(props) => props.theme.sdkPresets.linkHelpColor};
   }
 `;
 
@@ -273,6 +273,10 @@ export const Preview = styled(Box)`
   min-width: 660px;
   flex-direction: row;
 
+  .preview-description {
+    color: ${(props) => props.theme.sdkPresets.secondaryColor};
+  }
+
   @media ${tablet} {
     margin-top: 0;
     min-width: 0;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js
index 0f651cdbcf..5a76fec3df 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js
@@ -30,7 +30,7 @@ import styled from "styled-components";
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { githubLightInit, githubDarkInit } from "@uiw/codemirror-theme-github";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { SDK_SCRIPT_URL } from "@docspace/shared/constants";
 
 const StyledContainer = styled.div`
@@ -51,23 +51,23 @@ const CodeBlock = ({ config }) => {
 
   const baseTheme = githubLightInit({
     settings: {
-      background: "#FFFFFF",
-      caret: "#000000",
-      lineHighlight: "#F3F4F4",
-      gutterBorder: "#F8F9F9",
-      gutterBackground: "#F8F9F9",
-      gutterForeground: "#333333",
+      background: globalColors.white,
+      caret: globalColors.darkBlack,
+      lineHighlight: globalColors.lightGrayHover,
+      gutterBorder: globalColors.grayLight,
+      gutterBackground: globalColors.grayLight,
+      gutterForeground: globalColors.black,
     },
   });
 
   const darkTheme = githubDarkInit({
     settings: {
-      background: "#282828",
-      caret: "#FFFFFF",
-      lineHighlight: "#3D3D3D",
-      gutterBorder: "#242424",
-      gutterBackground: "#242424",
-      gutterForeground: "#ADADAD",
+      background: globalColors.darkGrayLight,
+      caret: globalColors.white,
+      lineHighlight: globalColors.lightDarkGrayHover,
+      gutterBorder: globalColors.grayDarkMid,
+      gutterBackground: globalColors.grayDarkMid,
+      gutterForeground: globalColors.darkGrayDark,
     },
   });
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
index 86cbbb4dfe..5260de48ba 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeToInsert.js
@@ -30,19 +30,19 @@ import CodeBlock from "../sub-components/CodeBlock";
 
 import { CategorySubHeader, CodeWrapper } from "../presets/StyledPresets";
 
-export const CodeToInsert = ({ t, theme, codeBlock, config }) => (
+export const CodeToInsert = ({ t, codeBlock, config }) => (
   <CodeWrapper height="fit-content">
     <CategorySubHeader className="copy-window-code">
       {`HTML ${t("CodeTitle")}`}
     </CategorySubHeader>
-    <Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
+    <Text lineHeight="20px" className="preview-description">
       {t("HtmlCodeDescription", { productName: t("Common:ProductName") })}
     </Text>
     <Textarea value={codeBlock} heightTextArea={153} />
     <CategorySubHeader className="copy-window-code">
       {`JavaScript ${t("CodeTitle")}`}
     </CategorySubHeader>
-    <Text lineHeight="20px" color={theme.isBase ? "#657077" : "#ADADAD"}>
+    <Text lineHeight="20px" className="preview-description">
       {t("JavaScriptCodeDescription", { productName: t("Common:ProductName") })}
     </Text>
     <CodeBlock config={config} />
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
index e2cca54f23..578829c82d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/MainElementParameter.js
@@ -40,6 +40,7 @@ import {
   ControlsSection,
   RowContainer,
 } from "../presets/StyledPresets";
+import { globalColors } from "@docspace/shared/themes";
 
 export const MainElementParameter = ({
   t,
@@ -117,7 +118,7 @@ export const MainElementParameter = ({
             <ColorInput
               scale
               handleChange={setButtonColor}
-              defaultColor={"#5299E0"}
+              defaultColor={globalColors.lightSecondMain}
             />
           </ControlsGroup>
           <ControlsGroup>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
index fdd430f3a1..808f5f3ce7 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PreviewBlock.js
@@ -51,9 +51,7 @@ export const PreviewBlock = ({
 
   const codeBlock = `<div id="${frameId}">Fallback text</div>\n<script src="${scriptUrl}${params}"></script>`;
 
-  const code = (
-    <CodeToInsert t={t} theme={theme} codeBlock={codeBlock} config={config} />
-  );
+  const code = <CodeToInsert t={t} codeBlock={codeBlock} config={config} />;
   const dataTabs = [
     {
       id: "preview",
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
index 7cf59273dd..d666279db8 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
@@ -29,6 +29,7 @@ import { Text } from "@docspace/shared/components/text";
 import styled from "styled-components";
 
 import XImg from "PUBLIC_DIR/images/x.react.svg";
+import { globalColors } from "@docspace/shared/themes";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -48,7 +49,7 @@ const HeaderContainer = styled.header`
   svg {
     cursor: pointer;
     path {
-      fill: #333;
+      fill: ${globalColors.black};
     }
   }
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
index efb9b69ef2..f99b887986 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
@@ -39,6 +39,7 @@ import { SelectorAddButton } from "@docspace/shared/components/selector-add-butt
 import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { tablet } from "@docspace/shared/utils";
 import Base from "@docspace/shared/themes/base";
+import { globalColors } from "@docspace/shared/themes";
 
 const CategoryHeader = styled.div`
   margin-top: 24px;
@@ -88,7 +89,7 @@ const ChipsContainer = styled.div`
 const InfoBar = styled.div`
   display: flex;
   background-color: ${(props) => props.theme.infoBar.background};
-  color: #333;
+  color: ${(props) => props.theme.infoBar.textColor};
   font-size: 12px;
   padding: 12px 16px;
   border-radius: 6px;
@@ -110,7 +111,7 @@ const InfoBar = styled.div`
     .header-icon {
       svg {
         path {
-          fill: #ed7309;
+          fill: ${(props) => props.theme.infoBar.iconFill};
         }
       }
     }
@@ -258,7 +259,7 @@ const CSP = ({
       </Container>
       <Text
         lineHeight="20px"
-        color={error ? theme?.input.focusErrorBorderColor : "#A3A9AE"}
+        color={error ? theme?.input.focusErrorBorderColor : globalColors.gray}
       >
         {error
           ? error
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
index 34f225d758..78e68cd649 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 import { mobile } from "@docspace/shared/utils/device";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -276,11 +276,11 @@ const StyledInputAddBlock = styled.div`
     gap: 4px;
 
     p {
-      color: #4781d1;
+      color: ${globalColors.lightBlueMain};
     }
 
     svg path {
-      fill: #4781d1;
+      fill: ${globalColors.lightBlueMain};
     }
   }
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
index 5025fc250f..9ff2f82c2f 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
@@ -1,5 +1,6 @@
 import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
+import { globalColors } from "@docspace/shared/themes";
 
 import {
   StyledRowContent,
@@ -28,7 +29,7 @@ export const RowContent = ({
           </Text>
         </FlexWrapper>
 
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
           {item.description}
         </Text>
       </ContentWrapper>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx
index ab75b213d2..3aa96cbe49 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/PreviewDialog.tsx
@@ -10,7 +10,7 @@ import { SocialButton } from "@docspace/shared/components/social-button";
 import { Text } from "@docspace/shared/components/text";
 import { Textarea } from "@docspace/shared/components/textarea";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { generatePKCEPair } from "@docspace/shared/utils/oauth";
 import { AuthenticationMethod } from "@docspace/shared/enums";
 import { SettingsStore } from "@docspace/shared/store/SettingsStore";
@@ -82,9 +82,9 @@ const StyledBlocksContainer = styled.div`
 const htmlBlock = `<body>
     <button id="docspace-button" class="docspace-button">
         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.89992 18.7913L1.47441 15.2914C0.841864 14.9858 0.841864 14.5136 1.47441 14.2359L4.05959 13.0137L8.87242 15.2914C9.50497 15.5969 10.5225 15.5969 11.1276 15.2914L15.9404 13.0137L18.5256 14.2359C19.1581 14.5414 19.1581 15.0136 18.5256 15.2914L11.1001 18.7913C10.5225 19.069 9.50497 19.069 8.89992 18.7913Z" fill="#FF6F3D"/>
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.87586 14.4606L1.47296 10.9566C0.842346 10.6507 0.842346 10.178 1.47296 9.89989L3.99543 8.7041L8.87586 11.0123C9.50647 11.3182 10.5209 11.3182 11.1241 11.0123L16.0046 8.7041L18.527 9.89989C19.1577 10.2058 19.1577 10.6785 18.527 10.9566L11.1241 14.4606C10.4935 14.7665 9.47906 14.7665 8.87586 14.4606Z" fill="#95C038"/>
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.87586 10.1747L1.47296 6.72119C0.842346 6.41969 0.842346 5.95374 1.47296 5.67965L8.87586 2.22612C9.50647 1.92463 10.5209 1.92463 11.1241 2.22612L18.527 5.67965C19.1577 5.98115 19.1577 6.4471 18.527 6.72119L11.1241 10.1747C10.4935 10.4488 9.47906 10.4488 8.87586 10.1747Z" fill="#5DC0E8"/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.89992 18.7913L1.47441 15.2914C0.841864 14.9858 0.841864 14.5136 1.47441 14.2359L4.05959 13.0137L8.87242 15.2914C9.50497 15.5969 10.5225 15.5969 11.1276 15.2914L15.9404 13.0137L18.5256 14.2359C19.1581 14.5414 19.1581 15.0136 18.5256 15.2914L11.1001 18.7913C10.5225 19.069 9.50497 19.069 8.89992 18.7913Z" fill=${globalColors.redRomb}/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.87586 14.4606L1.47296 10.9566C0.842346 10.6507 0.842346 10.178 1.47296 9.89989L3.99543 8.7041L8.87586 11.0123C9.50647 11.3182 10.5209 11.3182 11.1241 11.0123L16.0046 8.7041L18.527 9.89989C19.1577 10.2058 19.1577 10.6785 18.527 10.9566L11.1241 14.4606C10.4935 14.7665 9.47906 14.7665 8.87586 14.4606Z" fill=${globalColors.greenRomb}/>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M8.87586 10.1747L1.47296 6.72119C0.842346 6.41969 0.842346 5.95374 1.47296 5.67965L8.87586 2.22612C9.50647 1.92463 10.5209 1.92463 11.1241 2.22612L18.527 5.67965C19.1577 5.98115 19.1577 6.4471 18.527 6.72119L11.1241 10.1747C10.4935 10.4488 9.47906 10.4488 8.87586 10.1747Z" fill=${globalColors.blueRomb}/>
 		</svg>
 
         Sign in with DocSpace
@@ -106,10 +106,10 @@ const styleBlock = `<style>
 
         border: none;
         stroke: none;
-        background: #ffffff;
+        background: ${globalColors.white};
         box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 1px, rgba(0, 0, 0, 0.12) 0px 0px 1px;
 
-        color: rgb(163, 169, 174);
+        color: ${globalColors.gray};
 
         font-weight: 600;
         font-size: 14px;
@@ -122,12 +122,12 @@ const styleBlock = `<style>
     .docspace-button:hover {
         box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 1px, rgba(0, 0, 0, 0.12) 0px 0px 1px;
         cursor: pointer;
-        color: #333333;
+        color: ${globalColors.black};
     }
 	
 	.docspace-button:active {
-		background-color: #F8F9F9;
-		color: #333333;
+		background-color: ${globalColors.grayLight};
+		color: ${globalColors.black};
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsBar.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsBar.js
index 4a97c84ea3..9167d4a17a 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsBar.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsBar.js
@@ -46,12 +46,13 @@ const BarWrapper = styled.div`
 
   margin-top: 25px;
 
-  background: ${(props) => (props.theme.isBase ? "#f8f9f9" : "#3D3D3D")};
+  background: ${(props) => props.theme.client.settings.webhooks.barBackground};
   border-radius: 3px;
   flex-wrap: wrap;
 
   .barItemHeader {
     margin-bottom: 10px;
+    color: ${(props) => props.theme.client.settings.webhooks.color};
   }
 `;
 
@@ -72,13 +73,7 @@ const BarItem = styled.div`
 `;
 
 const BarItemHeader = ({ children }) => (
-  <Text
-    as="h3"
-    color="#A3A9AE"
-    fontSize="12px"
-    fontWeight={600}
-    className="barItemHeader"
-  >
+  <Text as="h3" fontSize="12px" fontWeight={600} className="barItemHeader">
     {children}
   </Text>
 );
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
index 77a9825252..ca370f59ab 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
@@ -32,6 +32,7 @@ import { inject, observer } from "mobx-react";
 
 import DangerIcon from "PUBLIC_DIR/images/danger.toast.react.svg?url";
 import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const DetailsWrapper = styled.div`
   width: 100%;
@@ -58,9 +59,10 @@ const ErrorMessageTooltip = styled.div`
   width: 100%;
   max-width: 1200px;
   padding: 8px 12px;
-  background: #f7cdbe;
+  background: ${(props) =>
+    props.theme.client.settings.webhooks.toastBackground};
 
-  box-shadow: 0px 5px 20px rgba(4, 15, 27, 0.07);
+  box-shadow: 0px 5px 20px ${globalColors.menuShadow};
   border-radius: 6px;
   display: flex;
   align-items: center;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
index 74f5b40277..f42872581c 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
@@ -26,14 +26,16 @@
 
 import React from "react";
 import styled, { css } from "styled-components";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import json_beautifier from "csvjson-json_beautifier";
+
 import { Textarea } from "@docspace/shared/components/textarea";
 import { Button } from "@docspace/shared/components/button";
 import { Text } from "@docspace/shared/components/text";
-import { inject, observer } from "mobx-react";
 
-import json_beautifier from "csvjson-json_beautifier";
 import { isMobile } from "@docspace/shared/utils";
-import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const DetailsWrapper = styled.div`
   width: 100%;
@@ -67,8 +69,8 @@ const LargePayloadStub = styled.div`
   padding: 12px 10px;
   margin-top: 4px;
 
-  background: #f8f9f9;
-  border: 1px solid #eceef1;
+  background: ${(props) => props.theme.client.settings.webhooks.background};
+  border: ${(props) => props.theme.client.settings.webhooks.border};
   border-radius: 3px;
 
   ${isMobile() &&
@@ -139,7 +141,7 @@ const ResponseDetails = ({ eventDetails }) => {
       </Text>
       {responsePayload.length > 4000 || numberOfLines > 100 ? (
         <LargePayloadStub>
-          <Text fontWeight={600} color="#657077">
+          <Text fontWeight={600} color={globalColors.lightGrayDark}>
             {t("PayloadIsTooLarge")}
           </Text>
           <Button
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
index a261ef987f..556688c530 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/EmptyFilter.js
@@ -26,15 +26,15 @@
 
 import React from "react";
 import styled from "styled-components";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
 
 import EmptyFilterImg from "PUBLIC_DIR/images/empty_filter.react.svg?url";
 import EmptyFilterDarkImg from "PUBLIC_DIR/images/empty_filter_dark.react.svg?url";
 import ClearEmptyFilterIcon from "PUBLIC_DIR/images/clear.empty.filter.svg?url";
 import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
-
-import { inject, observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const EmptyFilterWrapper = styled.div`
   width: 100%;
@@ -97,7 +97,9 @@ const EmptyFilter = (props) => {
           </Text>
           <Text
             fontSize="12px"
-            color={theme.isBase ? "#555F65" : "rgba(255, 255, 255, 0.6)"}
+            color={
+              theme.isBase ? globalColors.grayText : globalColors.grayDarkText
+            }
           >
             {t("NoResultsMatched")}
           </Text>
@@ -108,7 +110,7 @@ const EmptyFilter = (props) => {
               className="clearFilterIcon"
             />
             <Link
-              color={theme.isBase ? "#657077" : "inherit"}
+              color={theme.isBase ? globalColors.lightGrayDark : "inherit"}
               isHovered
               fontWeight={600}
               type="action"
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
index 140d1eedba..dc17175961 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
@@ -37,6 +37,7 @@ import { SelectorAddButton } from "@docspace/shared/components/selector-add-butt
 import { SelectedItem } from "@docspace/shared/components/selected-item";
 
 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const Selectors = styled.div`
   position: relative;
@@ -235,7 +236,7 @@ const DeliveryDatePicker = ({
                 <Text
                   isInline
                   fontWeight={600}
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                   className="mr-8"
                 >
                   {t("From")}
@@ -250,7 +251,12 @@ const DeliveryDatePicker = ({
                 />
               </span>
 
-              <Text isInline fontWeight={600} color="#A3A9AE" className="mr-8">
+              <Text
+                isInline
+                fontWeight={600}
+                color={globalColors.gray}
+                className="mr-8"
+              >
                 {t("Before")}
               </Text>
               <TimePicker
@@ -270,7 +276,7 @@ const DeliveryDatePicker = ({
                 onClick={showTimePicker}
                 className="mr-8 add-delivery-time-button"
               />
-              <Text isInline fontWeight={600} color="#A3A9AE">
+              <Text isInline fontWeight={600} color={globalColors.gray}>
                 {t("SelectDeliveryTime")}
               </Text>
             </TimePickerCell>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
index 4d1ccd4a07..ad4e3ba12f 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
@@ -81,8 +81,7 @@ const FilterButton = styled.div`
   z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)};
 
   border: 1px solid;
-  border-color: ${(props) =>
-    props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)"};
+  border-color: ${(props) => props.theme.client.settings.webhooks.filterBorder};
   border-radius: 3px;
   cursor: pointer;
 
@@ -91,7 +90,7 @@ const FilterButton = styled.div`
   }
 
   :hover {
-    border-color: #a3a9ae;
+    border-color: ${(props) => props.theme.client.settings.webhooks.color};
     svg {
       path {
         fill: ${(props) => props.theme.iconButton.hoverColor};
@@ -103,7 +102,8 @@ const FilterButton = styled.div`
     z-index: 203;
     width: 8px;
     height: 8px;
-    background-color: #4781d1;
+    background-color: ${(props) =>
+      props.theme.client.settings.webhooks.spanBackground};
     border-radius: 50%;
     position: absolute;
     bottom: -2px;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
index b6c91b96ab..5cba6ed91d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
@@ -48,7 +48,7 @@ import { useParams } from "react-router-dom";
 
 import { FloatingButton } from "@docspace/shared/components/floating-button";
 
-import Base from "@docspace/shared/themes/base";
+import { Base, globalColors } from "@docspace/shared/themes";
 
 const HeaderContainer = styled.div`
   position: sticky;
@@ -101,7 +101,7 @@ const HeaderContainer = styled.div`
     margin-block: 0;
     margin-inline: -20px 0;
 
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     flex: 0 0 auto;
 
@@ -112,7 +112,7 @@ const HeaderContainer = styled.div`
       svg {
         path {
           fill: ${(props) =>
-            props.isDisabled ? "#d0d5da" : props.theme.color};
+            props.isDisabled ? globalColors.grayStrong : props.theme.color};
         }
       }
     }
@@ -243,11 +243,6 @@ const HistoryHeader = (props) => {
       <Headline type="content" truncate={true} className="headline">
         {t("InfoPanel:SubmenuHistory")}
       </Headline>
-      {/* <Hint
-        backgroundColor={theme.isBase ? "#F8F9F9" : "#3D3D3D"}
-        color={theme.isBase ? "#555F65" : "#FFFFFF"}>
-        {t("EventHint")}
-      </Hint> */}
     </>
   );
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
index bb0b6b8d22..ee00c4dda0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
@@ -31,6 +31,7 @@ import { inject, observer } from "mobx-react";
 
 import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { Link } from "@docspace/shared/components/link";
+import { globalColors } from "@docspace/shared/themes";
 
 const StatusBarWrapper = styled.div`
   margin-top: 9px;
@@ -148,7 +149,7 @@ const StatusBar = (props) => {
           fontWeight={600}
           isHovered={true}
           onClick={clearAll}
-          color="#A3A9AE"
+          color={globalColors.gray}
           className="statusActionItem"
         >
           Clear all
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
index 405f419cb5..e9a82dabc1 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
@@ -33,6 +33,7 @@ import { RowContent } from "@docspace/shared/components/row-content";
 
 import StatusBadge from "../../../../sub-components/StatusBadge";
 import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   display: flex;
@@ -77,7 +78,7 @@ export const HistoryRowContent = ({ sectionWidth, historyItem }) => {
           </Text>
           <StatusBadge status={historyItem.status} />
         </StatusHeader>
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
           {formattedDelivery}
         </Text>
       </ContentWrapper>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/index.js
index d1c2bc9548..331d263962 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/index.js
@@ -48,7 +48,7 @@ const StyledRowContainer = styled(RowContainer)`
 
   .row-list-item:has(.selected-row-item) {
     background-color: ${(props) =>
-      props.theme.isBase ? "#f3f4f4" : "#3D3D3D"};
+      props.theme.client.settings.webhooks.historyRowBackground};
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js
index fd315af0da..c47341d05a 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js
@@ -66,7 +66,8 @@ const StyledTableRow = styled(TableRow)`
     props.isHighlight &&
     css`
       .table-container_cell {
-        background-color: #f3f4f4;
+        background-color: ${(props) =>
+          props.theme.client.settings.webhooks.tableCellBackground};
       }
     `}
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
index 97512aca8e..3d26960602 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
@@ -26,12 +26,12 @@
 
 import React from "react";
 import styled from "styled-components";
-import { Badge } from "@docspace/shared/components/badge";
-
 import { useTranslation } from "react-i18next";
-
 import { inject, observer } from "mobx-react";
 
+import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
+
 const StyledBadge = styled(Badge)`
   p {
     background-color: transparent;
@@ -45,21 +45,21 @@ const StatusBadge = (props) => {
     status >= 200 && status < 300
       ? theme.isBase
         ? {
-            backgroundColor: "rgba(53, 173, 23, 0.1)",
-            color: "#35AD17",
+            backgroundColor: globalColors.alphaGreenLight,
+            color: globalColors.lightStatusPositive,
           }
         : {
-            backgroundColor: "rgba(59, 164, 32, 0.1)",
-            color: "#3BA420",
+            backgroundColor: globalColors.alphaGreenDark,
+            color: globalColors.darkStatusPositive,
           }
       : theme.isBase
         ? {
-            backgroundColor: "rgba(242, 28, 14, 0.1)",
-            color: "#F21C0E",
+            backgroundColor: globalColors.alphaRedLight,
+            color: globalColors.lightErrorStatus,
           }
         : {
-            backgroundColor: "rgba(224, 100, 81, 0.1)",
-            color: "#E06451",
+            backgroundColor: globalColors.alphaRedDark,
+            color: globalColors.darkErrorStatus,
           };
   const { t } = useTranslation(["Webhooks"]);
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookInfo.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookInfo.js
index 847da21603..39eb8e1405 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookInfo.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookInfo.js
@@ -50,9 +50,10 @@ const InfoText = styled(Text)`
 InfoText.defaultProps = { theme: Base };
 
 const StyledGuideLink = styled(Link)`
-  color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
+  color: ${(props) => props.theme.client.settings.webhooks.linkColor};
+
   &:hover {
-    color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
+    color: ${(props) => props.theme.client.settings.webhooks.linkColor};
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
index 6fa962904b..b3c640c618 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
@@ -34,6 +34,7 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import StatusBadge from "../../StatusBadge";
 
 import { isMobile, tablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   display: flex;
@@ -96,7 +97,7 @@ export const WebhookRowContent = ({
         </FlexWrapper>
 
         {!isMobile() && (
-          <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+          <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
             {webhook.uri}
           </Text>
         )}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
index f928267779..42019875f6 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
@@ -40,6 +40,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledWrapper = styled.div`
   display: contents;
@@ -150,7 +151,7 @@ const WebhooksTableRow = (props) => {
             <Text
               as="span"
               fontSize="11px"
-              color="#A3A9AE"
+              color={globalColors.gray}
               fontWeight={600}
               className="textOverflow"
             >
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
index dac7c7bdc4..6c61dfdad0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
@@ -46,6 +46,8 @@ import OAuth from "./OAuth";
 
 import SSOLoader from "./sub-components/ssoLoader";
 
+import { globalColors } from "@docspace/shared/themes";
+
 const DeveloperToolsWrapper = (props) => {
   const { currentDeviceType, identityServerEnabled } = props;
   const navigate = useNavigate();
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
index 1612409d19..0a4c578295 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js
@@ -40,17 +40,24 @@ const StyledCertificateDialogBody = styled(Box)`
     flex-direction: column;
     gap: 4px;
     background-color: ${(props) =>
-      props.theme.isBase ? "#f8f9f9" : "#474747"};
-    border: 1px solid
-      ${(props) =>
-        props.hasError
-          ? "#F24724"
-          : props.theme.isBase
-            ? "#eceef1"
-            : "#474747"};
+      props.theme.client.settings.integration.ldap.certificateBackground};
+    border: ${(props) =>
+      props.hasError
+        ? props.theme.client.settings.integration.ldap.errorBorder
+        : props.theme.client.settings.integration.ldap.border};
     border-radius: 3px;
     padding: 4px;
     margin-bottom: 8px;
+
+    & > p {
+      color: ${(props) =>
+        props.theme.client.settings.integration.ldap.textColor};
+    }
+  }
+
+  .ldap-error-text {
+    color: ${(props) =>
+      props.theme.client.settings.integration.ldap.errorColor};
   }
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js
index f404be8b91..4bfdd052c6 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js
@@ -114,34 +114,34 @@ const CertificateDialog = ({
             </Text>
           </Box>
           <Box className="ldap-settings-crt-details">
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsSerialNumber")}: {cerficateIssue.serialNumber}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsIssuerName")}: {cerficateIssue.issuerName}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsSubjectName")}: {cerficateIssue.subjectName}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsValidFrom")}: {cerficateIssue.validFrom}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsValidUntil")}: {cerficateIssue.validUntil}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsUniqueHash")}: {cerficateIssue.uniqueHash}
             </Text>
           </Box>
           {hasError && (
             <Box>
               {cerficateIssue.errors.map((err) => (
-                <Text color="#F24724">{mapError(err)}</Text>
+                <Text className="ldap-error-text">{mapError(err)}</Text>
               ))}
             </Box>
           )}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js
index e1359045c5..cb91ff93d6 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js
@@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
 import { toastr } from "@docspace/shared/components/toast";
+import { globalColors } from "@docspace/shared/themes";
 
 const borderProp = { radius: "6px" };
 
@@ -92,7 +93,11 @@ const ToggleAutoSync = ({
             </Text>
             {!isLdapAvailable && (
               <Badge
-                backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+                backgroundColor={
+                  theme.isBase
+                    ? globalColors.favoritesStatus
+                    : globalColors.favoriteStatusDark
+                }
                 label={t("Common:Paid")}
                 className="toggle-caption_title_badge"
                 isPaidBadge={true}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js
index 12aa6d6fbd..eaa7ea8d75 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js
@@ -31,6 +31,7 @@ import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
 
 const borderProp = { radius: "6px" };
 
@@ -86,7 +87,11 @@ const ToggleLDAP = ({
             </Text>
             {!isLdapAvailable && (
               <Badge
-                backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+                backgroundColor={
+                  theme.isBase
+                    ? globalColors.favoritesStatus
+                    : globalColors.favoriteStatusDark
+                }
                 label={t("Common:Paid")}
                 className="toggle-caption_title_badge"
                 isPaidBadge={true}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/PluginItem.tsx b/packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/PluginItem.tsx
index 0c89a42c6b..bb72181d97 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/PluginItem.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/integration/Plugins/sub-components/PluginItem.tsx
@@ -29,6 +29,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
 import { Text } from "@docspace/shared/components/text";
+import { globalColors } from "@docspace/shared/themes";
 
 import PluginSettingsIconUrl from "PUBLIC_DIR/images/plugin.settings.react.svg?url";
 import PluginDefaultLogoUrl from "PUBLIC_DIR/images/plugin.default-logo.png";
@@ -96,7 +97,7 @@ const PluginItem = ({
           fontSize="12px"
           fontWeight={700}
           noHover
-          backgroundColor="#22C386"
+          backgroundColor={globalColors.mainGreen}
         />
 
         {imgSrc && description && (
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
index 0d010435d3..1ff4bbc0ae 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
@@ -44,7 +44,8 @@ const StyledCertificatesTable = styled.div`
       display: flex;
       align-items: center;
 
-      border-inline-start: 1px solid #d0d5da;
+      border-inline-start: ${(props) =>
+        props.theme.client.settings.integration.sso.border};
       height: 13px;
       padding-inline-start: 8px;
     }
@@ -67,6 +68,11 @@ const StyledCertificatesTable = styled.div`
 
       .column-row {
         display: flex;
+
+        .description {
+          color: ${(props) =>
+            props.theme.client.settings.integration.sso.textColor};
+        }
       }
     }
 
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js
index 16b1ed9f8b..1ec6e0149f 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/CertificatesTable.js
@@ -97,7 +97,7 @@ const CertificatesTable = (props) => {
           </div>
           <div className="column-row">
             <Text
-              color="#a3a9ae"
+              className="description"
               fontSize="12px"
               fontWeight={600}
               lineHeight="16px"
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
index f90fd6c5dd..d998ced539 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
@@ -31,6 +31,7 @@ import { useTranslation } from "react-i18next";
 import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
 import { mobile } from "@docspace/shared/utils";
 import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";
 
@@ -92,7 +93,11 @@ const ToggleSSO = ({ enableSso, ssoToggle, isSSOAvailable }) => {
           </Text>
           {!isSSOAvailable && (
             <Badge
-              backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.favoritesStatus
+                  : globalColors.favoriteStatusDark
+              }
               label={t("Common:Paid")}
               fontWeight="700"
               className="toggle-caption_title_badge"
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
index 76c9bbc043..40189b2b28 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
@@ -42,6 +42,7 @@ import { Badge } from "@docspace/shared/components/badge";
 import { toastr } from "@docspace/shared/components/toast";
 import { Button } from "@docspace/shared/components/button";
 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";
 
 import ConsumerItem from "./sub-components/consumerItem";
 import ConsumerModalDialog from "./sub-components/consumerModalDialog";
@@ -295,7 +296,11 @@ class ThirdPartyServices extends React.Component {
                   </Text>
                   <Badge
                     className="paid-badge"
-                    backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+                    backgroundColor={
+                      theme.isBase
+                        ? globalColors.favoritesStatus
+                        : globalColors.favoriteStatusDark
+                    }
                     fontWeight="700"
                     label={t("Common:Paid")}
                     isPaidBadge={true}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
index 9b28897dff..fa63804f19 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
@@ -31,7 +31,7 @@ import styled, { css } from "styled-components";
 import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 import ConsumerToggle from "./consumerToggle";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { thirdpartiesLogo } from "@docspace/shared/utils/image-thirdparties";
 
 const StyledItem = styled.div`
@@ -40,7 +40,7 @@ const StyledItem = styled.div`
       !props.isThirdPartyAvailable &&
       !props.isSet &&
       css`
-        color: #a3a9ae;
+        color: ${(props) => props.theme.client.settings.integration.textColor};
       `}
   }
 `;
@@ -53,17 +53,17 @@ const StyledBox = styled(Box)`
       !props.theme.isBase &&
       css`
         path {
-          fill: #ffffff;
+          fill: ${globalColors.white};
           opacity: 1;
         }
         ${props.isLinkedIn &&
         css`
           path:nth-child(8) {
-            fill: #333333;
+            fill: ${globalColors.black};
             opacity: 1;
           }
           path:nth-child(9) {
-            fill: #333333;
+            fill: ${globalColors.black};
             opacity: 1;
           }
         `}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/index.js b/packages/client/src/pages/PortalSettings/categories/integration/index.js
index 30aea6bd85..f8c97d791d 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/index.js
@@ -41,6 +41,7 @@ import DocumentService from "./DocumentService";
 import PluginPage from "./Plugins";
 import { Box } from "@docspace/shared/components/box";
 import { SECTION_HEADER_HEIGHT } from "@docspace/shared/components/section/Section.constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const IntegrationWrapper = (props) => {
   const {
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
index 7b7c7b26eb..b36f44e50c 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/BenefitsContainer.js
@@ -63,11 +63,15 @@ const StyledBody = styled.div`
         css`
           svg {
             path {
-              fill: #adadad !important;
+              fill: ${(props) =>
+                props.theme.client.settings.payment.benefitsContainer
+                  .iconsColor} !important;
             }
             mask + path {
               fill: none !important;
-              stroke: #adadad !important;
+              stroke: ${(props) =>
+                props.theme.client.settings.payment.benefitsContainer
+                  .iconsColor} !important;
             }
           }
         `}
diff --git a/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js b/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
index 05d2211035..16d101080d 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
@@ -64,6 +64,7 @@ const MainContainer = styled.div`
 
   .warning-text {
     margin-bottom: 9px;
+    color: ${(props) => props.theme.client.settings.security.ip.errorColor};
   }
 
   .save-cancel-buttons {
@@ -287,12 +288,7 @@ const IpSecurity = (props) => {
 
       {enable && (
         <>
-          <Text
-            color="#F21C0E"
-            fontSize="16px"
-            fontWeight="700"
-            className="warning-text"
-          >
+          <Text fontSize="16px" fontWeight="700" className="warning-text">
             {t("Common:Warning")}
           </Text>
           <Text className="ip-security_warning">
diff --git a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryContent.js b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryContent.js
index c08e140556..58d9c4a8c1 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryContent.js
@@ -54,6 +54,11 @@ const StyledRowContent = styled(RowContent)`
     width: min-content;
   }
 
+  .date-text {
+    color: ${(props) =>
+      props.theme.client.settings.security.loginHistory.textColor};
+  }
+
   ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;
 
@@ -82,8 +87,7 @@ const HistoryContent = ({ sectionWidth, item, locale, theme }) => {
         fontSize="12px"
         fontWeight={600}
         truncate={true}
-        color="#A3A9AE"
-        className="settings_unavailable"
+        className="settings_unavailable date-text"
       >
         {dateStr}
       </Text>
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
index e8f4df9edd..ca1f4aa6cf 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
@@ -35,6 +35,7 @@ import { toastr } from "@docspace/shared/components/toast";
 import { UnavailableStyles } from "../../../utils/commonSettingsStyles";
 import { mobile, tablet } from "@docspace/shared/utils";
 import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledTextInput = styled(TextInput)`
   margin-top: 4px;
@@ -75,7 +76,8 @@ const MainContainer = styled.div`
 
   .login-subheader {
     font-size: 13px;
-    color: #657077;
+    color: ${(props) =>
+      props.theme.client.settings.security.loginHistory.subheaderColor};
   }
 
   .latest-text {
@@ -312,7 +314,11 @@ const HistoryMainContent = (props) => {
         <Badge
           className="paid-badge"
           fontWeight="700"
-          backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.favoritesStatus
+              : globalColors.favoriteStatusDark
+          }
           label={t("Common:Paid")}
           isPaidBadge={true}
         />
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js b/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js
index 4edf26853c..cb90738b6c 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js
@@ -33,6 +33,7 @@ import { isMobile } from "@docspace/shared/utils";
 import { Text } from "@docspace/shared/components/text";
 import { Badge } from "@docspace/shared/components/badge";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
+import { globalColors } from "@docspace/shared/themes";
 
 import { StyledBaseQuotaComponent, StyledMainTitle } from "./StyledComponent";
 import { QuotaPerRoomComponentSection } from "./sub-components/QuotaPerRoom";
@@ -68,7 +69,11 @@ const QuotasComponent = (props) => {
 
         {!isStatisticsAvailable && (
           <Badge
-            backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
             label={t("Common:Paid")}
             className="paid-badge"
             isPaidBadge
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js b/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js
index e32e752092..26e02647fc 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js
@@ -30,6 +30,7 @@ import { useTheme } from "styled-components";
 
 import { Text } from "@docspace/shared/components/text";
 import { Badge } from "@docspace/shared/components/badge";
+import { globalColors } from "@docspace/shared/themes";
 
 import ItemIcon from "SRC_DIR/components/ItemIcon";
 import SpaceQuota from "SRC_DIR/components/SpaceQuota";
@@ -91,7 +92,11 @@ const StatisticsComponent = (props) => {
         </StyledMainTitle>
         {!isStatisticsAvailable && (
           <Badge
-            backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
             label={t("Common:Paid")}
             className="paid-badge"
             isPaidBadge
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
index 3e49ea3883..d6adbc45a9 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
@@ -197,7 +197,8 @@ const StyledStatistics = styled.div`
 const StyledDivider = styled.div`
   height: 1px;
   width: 100%;
-  background-color: #ddd;
+  background-color: ${(props) =>
+    props.theme.client.settings.storageManagement.dividerColor};
   margin: 28px 0 28px;
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js b/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
index 22e64bcaf8..0eb7d6148a 100644
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/Diagram.js
@@ -35,6 +35,7 @@ import {
   StyledFolderTagSection,
 } from "../StyledComponent";
 import { getConvertedSize } from "@docspace/shared/utils/common";
+import { globalColors } from "@docspace/shared/themes";
 
 const calculateSize = (size, common) => {
   if (common === -1) return 0;
@@ -51,7 +52,12 @@ const getTags = (
   usedPortalSpace,
 ) => {
   const array = [];
-  const colors = ["#13B7EC", "#22C386", "#FF9933", "#FFD30F"];
+  const colors = [
+    globalColors.mainBlueLight,
+    globalColors.secondGreen,
+    globalColors.secondOrange,
+    globalColors.mainYellow,
+  ];
 
   let i = 0;
   let commonSize = standalone ? tenantCustomQuota : maxTotalSizeByQuota;
diff --git a/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js b/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js
index 0a3b9965ba..db3778a3b4 100644
--- a/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js
+++ b/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js
@@ -32,6 +32,7 @@ import { Badge } from "@docspace/shared/components/badge";
 import { Link } from "@docspace/shared/components/link";
 import { Base } from "@docspace/shared/themes";
 import commonIconsStyles from "@docspace/shared/utils/common-icons-style";
+import { globalColors } from "@docspace/shared/themes";
 
 import ArrowRightIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
 
@@ -109,7 +110,11 @@ const MobileCategoryWrapper = (props) => {
         </Link>
         {withPaidBadge && (
           <Badge
-            backgroundColor={theme.isBase ? "#EDC409" : "#A38A1A"}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
             label={badgeLabel}
             isPaidBadge={true}
             className="paid-badge"
diff --git a/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js b/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
index add840cea6..b7d3fc3897 100644
--- a/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
+++ b/packages/client/src/pages/PortalSettings/utils/commonSettingsStyles.js
@@ -43,7 +43,7 @@ export const commonSettingsStyles = css`
     }
 
     .category-item-description {
-      color: #555f65;
+      color: ${(props) => props.theme.client.settings.descriptionColor};
       font-size: 12px;
       max-width: 1024px;
     }
diff --git a/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js b/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
index 52a6e90f78..1b5d7a7a74 100644
--- a/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
+++ b/packages/client/src/pages/PortalSettings/utils/whiteLabelHelper.js
@@ -27,13 +27,14 @@
 import axios from "axios";
 import config from "PACKAGE_FILE";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import { globalColors } from "@docspace/shared/themes";
 
 export const generateLogo = (
   width,
   height,
   text,
   fontSize = 18,
-  fontColor = "#000",
+  fontColor = globalColors.darkBlack,
   alignCenter = false,
   isEditor = false,
 ) => {
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
index f39c275353..2610948dbc 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
@@ -32,6 +32,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import SessionsRowContent from "./SessionsRowContent";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const SessionsRow = (props) => {
   const {
@@ -57,7 +58,11 @@ const SessionsRow = (props) => {
     <>
       {showTickIcon ? (
         !isMobile() && (
-          <IconButton size={16} iconName={TickSvgUrl} color="#20D21F" />
+          <IconButton
+            size={16}
+            iconName={TickSvgUrl}
+            color={globalColors.tickColor}
+          />
         )
       ) : (
         <IconButton
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
index 03652a24e1..5130f32f83 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
@@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { RowContent } from "@docspace/shared/components/row-content";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledRowContent = styled(RowContent)`
   .rowMainContainer {
@@ -66,7 +67,11 @@ const SessionsRowContent = ({
         {platform} <span className="session-browser">{`(${browser})`}</span>
       </Text>
       {isMobile() && showTickIcon && (
-        <IconButton size={12} iconName={TickSvgUrl} color="#20D21F" />
+        <IconButton
+          size={12}
+          iconName={TickSvgUrl}
+          color={globalColors.tickColor}
+        />
       )}
       <Text truncate>{convertTime(date)}</Text>
       {(country || city) && (
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
index b11d1d97e2..2e55b545ac 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
@@ -36,6 +36,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { convertTime } from "@docspace/shared/utils/convertTime";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";
 
 const StyledTableRow = styled(TableRow)`
   .session-platform {
@@ -100,7 +101,7 @@ const SessionsTableRow = (props) => {
           <IconButton
             size={12}
             className="tick-icon"
-            color="#20D21F"
+            color={globalColors.tickColor}
             iconName={TickSvgUrl}
           />
         )}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowContent.tsx b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowContent.tsx
index 7cc10077a2..1f7edd4ba0 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowContent.tsx
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowContent.tsx
@@ -1,5 +1,6 @@
 import { Text } from "@docspace/shared/components/text";
 import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
+import { globalColors } from "@docspace/shared/themes";
 
 import {
   StyledRowContent,
@@ -22,9 +23,9 @@ export const RowContent = ({ sectionWidth, item }: RowContentProps) => {
           </Text>
         </FlexWrapper>
 
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
           <Link
-            color="#A3A9AE"
+            color={globalColors.gray}
             href={item.websiteUrl}
             type={LinkType.page}
             target={LinkTarget.blank}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js
index e22cebdc8f..b9b8e49a42 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js
@@ -68,7 +68,7 @@ const LoginSettings = (props) => {
         <Text fontSize="16px" fontWeight={700} lineHeight="22px">
           {t("Settings:TwoFactorAuth")}
         </Text>
-        <Text color="#A3A9AE">{t("TwoFactorDescription")}</Text>
+        <Text className="description">{t("TwoFactorDescription")}</Text>
       </div>
       <div className="actions">
         <Button
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
index 1b150dfc18..c827da454a 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
@@ -39,6 +39,10 @@ export const StyledWrapper = styled.div`
     gap: 4px;
   }
 
+  .description {
+    color: ${(props) => props.theme.profile.login.textColor};
+  }
+
   .actions {
     display: flex;
     gap: 16px;
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
index 3d02bd374f..867e6fe5a0 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
@@ -67,6 +67,7 @@ import { Tooltip } from "@docspace/shared/components/tooltip";
 import withCultureNames from "SRC_DIR/HOCs/withCultureNames";
 import { isMobile } from "@docspace/shared/utils";
 import { useTheme } from "styled-components";
+import { globalColors } from "@docspace/shared/themes";
 
 const MainProfile = (props) => {
   const { t } = useTranslation(["Profile", "Common"]);
@@ -160,7 +161,7 @@ const MainProfile = (props) => {
     : DefaultUserAvatarMax;
 
   const tooltipLanguage = (
-    <Text as="div" fontSize="12px" color="#333333">
+    <Text as="div" fontSize="12px">
       <Trans t={t} i18nKey="NotFoundLanguage" ns="Common">
         "In case you cannot find your language in the list of the available
         ones, feel free to write to us at
@@ -227,8 +228,12 @@ const MainProfile = (props) => {
             <Badge
               className="sso-badge"
               label={t("Common:SSO")}
-              color={"#FFFFFF"}
-              backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
+              color={globalColors.white}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondGreen
+                  : globalColors.secondGreenDark
+              }
               fontSize={"9px"}
               fontWeight={800}
               noHover
@@ -241,8 +246,12 @@ const MainProfile = (props) => {
             <Badge
               className="sso-badge"
               label={t("Common:LDAP")}
-              color={"#FFFFFF"}
-              backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
+              color={globalColors.white}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondPurple
+                  : globalColors.secondPurpleDark
+              }
               fontSize={"9px"}
               fontWeight={800}
               noHover
@@ -267,8 +276,12 @@ const MainProfile = (props) => {
                   id="sso-badge-profile"
                   className="sso-badge"
                   label={t("Common:SSO")}
-                  color={"#FFFFFF"}
-                  backgroundColor={theme.isBase ? "#22C386" : "#2E5E4C"}
+                  color={globalColors.white}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.secondGreen
+                      : globalColors.secondGreenDark
+                  }
                   fontSize={"9px"}
                   fontWeight={800}
                   noHover
@@ -286,8 +299,12 @@ const MainProfile = (props) => {
                   id="ldap-badge-profile"
                   className="ldap-badge"
                   label={t("Common:LDAP")}
-                  color={"#FFFFFF"}
-                  backgroundColor={theme.isBase ? "#8570BD" : "#544C6A"}
+                  color={globalColors.white}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.secondPurple
+                      : globalColors.secondPurpleDark
+                  }
                   fontSize={"9px"}
                   fontWeight={800}
                   noHover
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
index 83c7763ac9..99e9432caf 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
@@ -145,7 +145,7 @@ export const StyledInfo = styled.div`
     min-width: 12px;
 
     svg path {
-      fill: ${(props) => props.theme.isBase && `#657077`};
+      fill: ${(props) => props.theme.profile.main.iconFill};
     }
   }
 
@@ -251,7 +251,7 @@ export const StyledInfo = styled.div`
           font-size: 12px !important;
           line-height: 16px !important;
           white-space: nowrap;
-          color: rgb(163, 169, 174);
+          color: ${(props) => props.theme.profile.main.mobileLabel};
         }
 
         .mobile-profile-label-field {
@@ -274,7 +274,7 @@ export const StyledInfo = styled.div`
           min-width: 12px;
 
           svg path {
-            fill: ${(props) => props.theme.isBase && `#657077`};
+            fill: ${(props) => props.theme.profile.main.iconFill};
           }
         }
 
diff --git a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
index 480f71f41c..bb051f955a 100644
--- a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
+++ b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
@@ -51,7 +51,7 @@ const StyledContainer = styled.div`
   .public-room-header_separator {
     margin-block: 0;
     margin-inline: 15px 16px;
-    border-inline-start: 1px solid #dfe2e3;
+    border-inline-start: ${(props) => props.theme.publicRoom.border};
     height: 21px;
   }
 
diff --git a/packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js b/packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
index 5d5e4e9725..c13895a6d6 100644
--- a/packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
+++ b/packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
@@ -239,6 +239,10 @@ const StyledVersionRow = styled(Row)`
 
   .version-comment-wrapper {
     white-space: normal !important;
+
+    .version_text {
+      color: ${(props) => props.theme.filesVersionHistory.commentColor};
+    }
   }
 
   .row_context-menu-wrapper {
diff --git a/packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js b/packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js
index b909c55452..87d0e1a967 100644
--- a/packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js
+++ b/packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js
@@ -329,7 +329,7 @@ const VersionRow = (props) => {
               </>
             )}
 
-            <Text className="version_text" color="#A3A9AE" truncate={true}>
+            <Text className="version_text" truncate={true}>
               {info.comment}
             </Text>
           </>
diff --git a/packages/client/src/pages/VersionHistory/Section/Header/index.js b/packages/client/src/pages/VersionHistory/Section/Header/index.js
index f09694fc00..ba5084fe66 100644
--- a/packages/client/src/pages/VersionHistory/Section/Header/index.js
+++ b/packages/client/src/pages/VersionHistory/Section/Header/index.js
@@ -67,8 +67,6 @@ const SectionHeaderContent = (props) => {
       <IconButton
         iconName={ArrowPathReactSvgUrl}
         size="17"
-        // color="#A3A9AE"
-        // hoverColor="#657077"
         isFill={true}
         onClick={onClickBack}
         className="arrow-button"
diff --git a/packages/client/src/pages/Wizard/StyledWizard.js b/packages/client/src/pages/Wizard/StyledWizard.js
index f68cef512f..80e7fd25c3 100644
--- a/packages/client/src/pages/Wizard/StyledWizard.js
+++ b/packages/client/src/pages/Wizard/StyledWizard.js
@@ -159,6 +159,10 @@ export const StyledInfo = styled.div`
 
   margin-bottom: 4px;
 
+  .text {
+    color: ${(props) => props.theme.client.wizard.textColor};
+  }
+
   .machine-name {
     padding-bottom: 4px;
     padding-top: 4px;
diff --git a/packages/client/src/pages/Wizard/index.js b/packages/client/src/pages/Wizard/index.js
index 690d2c8235..a3cb80eedd 100644
--- a/packages/client/src/pages/Wizard/index.js
+++ b/packages/client/src/pages/Wizard/index.js
@@ -416,7 +416,7 @@ const Wizard = (props) => {
                 </FieldContainer>
               )}
               <StyledInfo>
-                <Text color="#A3A9AE" fontWeight={400}>
+                <Text className="text" fontWeight={400}>
                   {t("Common:Domain")}
                 </Text>
                 <Text fontWeight={600} className="machine-name">
@@ -424,7 +424,7 @@ const Wizard = (props) => {
                 </Text>
               </StyledInfo>
               <StyledInfo>
-                <Text color="#A3A9AE" fontWeight={400}>
+                <Text className="text" fontWeight={400}>
                   {t("Common:Language")}
                 </Text>
                 <div className="wrapper__language-selector">
@@ -452,7 +452,7 @@ const Wizard = (props) => {
                 </div>
               </StyledInfo>
               <StyledInfo>
-                <Text color="#A3A9AE" fontWeight={400}>
+                <Text className="text" fontWeight={400}>
                   {t("Timezone")}
                 </Text>
                 <ComboBox
diff --git a/packages/login/src/components/CodeLogin.tsx b/packages/login/src/components/CodeLogin.tsx
deleted file mode 100644
index 62dbb30912..0000000000
--- a/packages/login/src/components/CodeLogin.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-// // (c) Copyright Ascensio System SIA 2009-2024
-// //
-// // This program is a free software product.
-// // You can redistribute it and/or modify it under the terms
-// // of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// // Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// // to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// // any third-party rights.
-// //
-// // This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// // of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// // the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-// //
-// // You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-// //
-// // The  interactive user interfaces in modified source and object code versions of the Program must
-// // display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-// //
-// // Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// // distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// // trademark law for use of our trademarks.
-// //
-// // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-// import React, { useState } from "react";
-// import { useTranslation } from "react-i18next";
-// import { inject, observer } from "mobx-react";
-// import { Text } from "@docspace/shared/components/text";
-// import { Link } from "@docspace/shared/components/link";
-// import { CodeInput } from "@docspace/shared/components/code-input";
-// import { Trans } from "react-i18next";
-// import { ReactSVG } from "react-svg";
-// import { LoginFormWrapper } from "./StyledLogin";
-// import BarLogo from "PUBLIC_DIR/images/danger.alert.react.svg";
-// import { Dark, Base } from "@docspace/shared/themes";
-// import { getBgPattern, frameCallCommand } from "@docspace/shared/utils/common";
-// import { getLogoUrl } from "@docspace/shared/utils";
-// import { WhiteLabelLogoType } from "@docspace/shared/enums";
-// import { useMounted } from "../helpers/useMounted";
-// import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
-// import LoginContainer from "@docspace/shared/components/color-theme/sub-components/LoginContainer";
-// import { useThemeDetector } from "@docspace/shared/hooks/useThemeDetector";
-
-// interface ILoginProps extends IInitialState {
-//   isDesktopEditor?: boolean;
-//   theme: IUserTheme;
-//   setTheme: (theme: IUserTheme) => void;
-// }
-
-// interface IBarProp {
-//   t: TFuncType;
-//   expired: boolean;
-// }
-
-// const Bar: React.FC<IBarProp> = (props) => {
-//   const { t, expired } = props;
-//   const type = expired ? "warning" : "error";
-//   const text = expired ? t("ExpiredCode") : t("InvalidCode");
-
-//   return (
-//     <div className={`code-input-bar ${type}`}>
-//       <BarLogo />
-//       {text}
-//     </div>
-//   );
-// };
-
-// const Form: React.FC<ILoginProps> = ({ theme, setTheme }) => {
-//   const { t } = useTranslation("Login");
-//   const [invalidCode, setInvalidCode] = useState(false);
-//   const [expiredCode, setExpiredCode] = useState(false);
-//   const [isLoading, setIsLoading] = useState(false);
-
-//   const email = "test@onlyoffice.com"; //TODO: get email from form
-//   const validCode = "123456"; //TODO: get from api
-//   const systemTheme = typeof window !== "undefined" && useThemeDetector();
-
-//   useIsomorphicLayoutEffect(() => {
-//     const theme =
-//       window.matchMedia &&
-//       window.matchMedia("(prefers-color-scheme: dark)").matches
-//         ? Dark
-//         : Base;
-//     setTheme(theme);
-//     frameCallCommand("setIsLoaded");
-//   }, []);
-
-//   useIsomorphicLayoutEffect(() => {
-//     if (systemTheme === "Base") setTheme(Base);
-//     else setTheme(Dark);
-//   }, [systemTheme]);
-
-//   const onSubmit = (code: number | string) => {
-//     if (code !== validCode) {
-//       setInvalidCode(true);
-//     } else {
-//       console.log(`Code ${code}`); //TODO: send code on backend
-//       setIsLoading(true);
-//       setTimeout(() => setIsLoading(false), 5000); // fake
-//     }
-//   };
-
-//   const handleChange = () => {
-//     setInvalidCode(false);
-//   };
-
-//   const logoUrl = getLogoUrl(WhiteLabelLogoType.LoginPage, !theme?.isBase);
-
-//   return (
-//     <LoginContainer id="code-page" theme={theme}>
-//       <img src={logoUrl} className="logo-wrapper" />
-//       <Text
-//         id="workspace-title"
-//         fontSize="23px"
-//         fontWeight={700}
-//         textAlign="center"
-//         className="workspace-title"
-//       >
-//         {t("CodeTitle")}
-//       </Text>
-
-//       <Text
-//         className="code-description"
-//         fontSize="12px"
-//         fontWeight={400}
-//         textAlign="center"
-//       >
-//         <Trans t={t} i18nKey="CodeSubtitle" ns="Login" key={email}>
-//           We sent a 6-digit code to {{ email }}. The code has a limited validity
-//           period, enter it as soon as possible.{" "}
-//         </Trans>
-//       </Text>
-
-//       <div className="code-input-container">
-//         <CodeInput
-//           theme={theme}
-//           onSubmit={onSubmit}
-//           onChange={handleChange}
-//           isDisabled={isLoading}
-//         />
-//         {(expiredCode || invalidCode) && <Bar t={t} expired={expiredCode} />}
-
-//         {expiredCode && (
-//           <Link
-//             isHovered
-//             type="action"
-//             fontSize="13px"
-//             fontWeight="600"
-//             color="#3B72A7"
-//           >
-//             {t("ResendCode")}
-//           </Link>
-//         )}
-
-//         <Text
-//           className="not-found-code code-description"
-//           fontSize="12px"
-//           textAlign="center"
-//         >
-//           {t("NotFoundCode")}
-//         </Text>
-//       </div>
-//     </LoginContainer>
-//   );
-// };
-
-// const CodeLogin: React.FC<ICodeProps> = (props) => {
-//   const bgPattern = getBgPattern(props.currentColorScheme.id);
-//   const mounted = useMounted();
-
-//   if (!mounted) return <></>;
-//   return (
-//     <LoginFormWrapper bgPattern={bgPattern}>
-//       <Form {...props} />
-//     </LoginFormWrapper>
-//   );
-// };
-
-// export default inject(({ loginStore }) => {
-//   return {
-//     theme: loginStore.theme,
-//     setTheme: loginStore.setTheme,
-//   };
-// })(observer(CodeLogin));
diff --git a/packages/management/src/categories/spaces/StyledSpaces.tsx b/packages/management/src/categories/spaces/StyledSpaces.tsx
index 10a069c04f..89d46fcd74 100644
--- a/packages/management/src/categories/spaces/StyledSpaces.tsx
+++ b/packages/management/src/categories/spaces/StyledSpaces.tsx
@@ -76,6 +76,13 @@ const ConfigurationWrapper = styled.div`
     &-configuration-title {
       padding-bottom: 8px;
     }
+    &-input-subheader {
+      color: ${({ theme }) => theme.management.textColor};
+    }
+  }
+
+  .error-text {
+    color: ${({ theme }) => theme.management.errorColor};
   }
 `;
 
diff --git a/packages/management/src/categories/spaces/sub-components/ConfigurationSection.tsx b/packages/management/src/categories/spaces/sub-components/ConfigurationSection.tsx
index 74ccb2783e..0420d14f7a 100644
--- a/packages/management/src/categories/spaces/sub-components/ConfigurationSection.tsx
+++ b/packages/management/src/categories/spaces/sub-components/ConfigurationSection.tsx
@@ -141,7 +141,7 @@ const ConfigurationSection = ({ t }: TConfigurationSection): JSX.Element => {
             >
               {t("Common:Domain")}
             </Text>
-            <Text color="#A3A9AE">(example.com)</Text>
+            <Text className="spaces-input-subheader">(example.com)</Text>
           </div>
 
           <TextInput
@@ -156,10 +156,10 @@ const ConfigurationSection = ({ t }: TConfigurationSection): JSX.Element => {
             {domainNameError &&
               domainNameError.map((err, index) => (
                 <Text
+                  className="error-text"
                   key={index}
                   fontSize="12px"
                   fontWeight="400"
-                  color="#F24724"
                 >
                   {err}
                 </Text>
@@ -179,7 +179,7 @@ const ConfigurationSection = ({ t }: TConfigurationSection): JSX.Element => {
             tabIndex={2}
           />
           <div>
-            <Text fontSize="12px" fontWeight="400" color="#F24724">
+            <Text className="error-text" fontSize="12px" fontWeight="400">
               {portalNameError || checkDomainError}
             </Text>
           </div>
diff --git a/packages/management/src/categories/spaces/sub-components/RowView/RoomContent.tsx b/packages/management/src/categories/spaces/sub-components/RowView/RoomContent.tsx
index 4ec1006a3c..1de6023918 100644
--- a/packages/management/src/categories/spaces/sub-components/RowView/RoomContent.tsx
+++ b/packages/management/src/categories/spaces/sub-components/RowView/RoomContent.tsx
@@ -26,11 +26,15 @@
 
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { RowContent } from "@docspace/shared/components/row-content";
-import { Text } from "@docspace/shared/components/text";
 import styled, { css } from "styled-components";
 import { isMobileOnly } from "react-device-detect";
+
+import { RowContent } from "@docspace/shared/components/row-content";
+import { Text } from "@docspace/shared/components/text";
+
 import { getConvertedSize } from "@docspace/shared/utils/common";
+import { TTheme } from "@docspace/shared/themes";
+
 import { TPortals } from "SRC_DIR/types/spaces";
 
 const StyledRowContent = styled(RowContent)`
@@ -47,14 +51,19 @@ const StyledRowContent = styled(RowContent)`
   .mainIcons {
     height: 20px;
   }
+
+  .spaces_row-current {
+    color: ${({ theme }) => theme.management.textColor};
+  }
 `;
 
 type TRoomContent = {
   item: TPortals;
   isCurrentPortal: boolean;
+  theme: TTheme;
 };
 
-export const RoomContent = ({ item, isCurrentPortal }: TRoomContent) => {
+export const RoomContent = ({ item, isCurrentPortal, theme }: TRoomContent) => {
   const { t } = useTranslation(["Management", "Common", "Settings"]);
 
   const { roomAdminCount, usersCount, roomsCount, usedSize } =
@@ -71,11 +80,14 @@ export const RoomContent = ({ item, isCurrentPortal }: TRoomContent) => {
   const storageSpace =
     customQuota >= 0 ? `${usedStorage}/${maxStorage}` : `${usedStorage}`;
 
+  const sideColor = theme?.management?.sideColor;
+  const nameColor = theme?.management?.nameColor;
+
   return (
     <StyledRowContent
       sectionWidth={"620px"}
-      sideColor="#A3A9AE"
-      nameColor="#D0D5DA"
+      sideColor={sideColor}
+      nameColor={nameColor}
       className="spaces_row-content"
     >
       <div className="user-container-wrapper">
@@ -89,7 +101,6 @@ export const RoomContent = ({ item, isCurrentPortal }: TRoomContent) => {
         fontSize="14px"
         fontWeight={600}
         truncate={true}
-        color="#A3A9AE"
         className="spaces_row-current"
       >
         {isCurrentPortal && t("CurrentSpace")}
diff --git a/packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx b/packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx
index e9e9345bb2..7a5e9a2b60 100644
--- a/packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx
+++ b/packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx
@@ -62,7 +62,7 @@ type TRow = {
 const SpacesRoomRow = ({ item }: TRow) => {
   const { spacesStore, settingsStore } = useStore();
   const { setDeletePortalDialogVisible, setCurrentPortal } = spacesStore;
-  const { tenantAlias, getAllPortals } = settingsStore;
+  const { tenantAlias, getAllPortals, theme } = settingsStore;
 
   const [isVisibleDialog, setIsVisibleDialog] = useState(false);
   const [isDisableQuota, setIsDisableQuota] = useState(false);
@@ -146,6 +146,7 @@ const SpacesRoomRow = ({ item }: TRow) => {
         element={logoElement}
         key={item.id}
         data={item}
+        theme={theme}
       >
         <RoomContent item={item} isCurrentPortal={isCurrentPortal} />
       </StyledRoomRow>
diff --git a/packages/management/src/categories/spaces/sub-components/dialogs/ChangeDomainDialog/index.tsx b/packages/management/src/categories/spaces/sub-components/dialogs/ChangeDomainDialog/index.tsx
index 4a06dbc32c..5e216414c5 100644
--- a/packages/management/src/categories/spaces/sub-components/dialogs/ChangeDomainDialog/index.tsx
+++ b/packages/management/src/categories/spaces/sub-components/dialogs/ChangeDomainDialog/index.tsx
@@ -44,6 +44,10 @@ const StyledModal = styled(ModalDialogContainer)`
   .create-portal-input {
     width: 100%;
   }
+
+  .error-text {
+    color: ${({ theme }) => theme.management.errorColor};
+  }
 `;
 
 const ChangeDomainDialogComponent = () => {
@@ -121,10 +125,10 @@ const ChangeDomainDialogComponent = () => {
             {domainNameError &&
               domainNameError.map((err, index) => (
                 <Text
+                  className="error-text"
                   key={index}
                   fontSize="12px"
                   fontWeight="400"
-                  color="#F24724"
                 >
                   {err}
                 </Text>
diff --git a/packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx b/packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx
index 7726f723ca..ef67f048a0 100644
--- a/packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx
+++ b/packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx
@@ -59,6 +59,14 @@ const StyledModal = styled(ModalDialogContainer)`
   .create-portal-input {
     width: 100%;
   }
+
+  .error-text {
+    color: ${({ theme }) => theme.management.errorColor};
+  }
+
+  .sub-text {
+    color: ${({ theme }) => theme.management.textColor};
+  }
 `;
 
 const CreatePortalDialog = () => {
@@ -167,15 +175,15 @@ const CreatePortalDialog = () => {
             className="create-portal-input"
           />
           <div>
-            <Text fontSize="12px" fontWeight="400" color="#F24724">
+            <Text className="error-text" fontSize="12px" fontWeight="400">
               {registerError}
             </Text>
           </div>
           <div style={{ marginTop: "6px", wordWrap: "break-word" }}>
             <Text
+              className="sub-text"
               fontSize="12px"
               fontWeight="400"
-              color="#A3A9AE"
             >{`${name}.${baseDomain}`}</Text>
           </div>
         </div>
diff --git a/packages/shared/.storybook/darkTheme.js b/packages/shared/.storybook/darkTheme.js
index b80235cf76..bdeefec498 100644
--- a/packages/shared/.storybook/darkTheme.js
+++ b/packages/shared/.storybook/darkTheme.js
@@ -1,9 +1,10 @@
 import { create } from "@storybook/theming/create";
 import Logo from "./darksmall.svg?url";
+import { globalColors } from "../themes";
 
 export default create({
   base: "dark",
-  appBg: "#333",
+  appBg: globalColors.black,
 
   brandTitle: "ONLYOFFICE",
   brandUrl: "https://www.onlyoffice.com/docspace.aspx",
diff --git a/packages/shared/.storybook/globals/theme-wrapper.js b/packages/shared/.storybook/globals/theme-wrapper.js
index 099b86f2a1..59d5338f89 100644
--- a/packages/shared/.storybook/globals/theme-wrapper.js
+++ b/packages/shared/.storybook/globals/theme-wrapper.js
@@ -1,12 +1,16 @@
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../../components/theme-provider";
+import { globalColors } from "../../themes";
 
 const ThemeWrapper = ({ theme, children }) => {
   return (
     <ThemeProvider
       theme={theme}
       currentColorScheme={{
-        main: { accent: "#4781D1", buttons: "#5299E0" },
+        main: {
+          accent: globalColors.lightBlueMain,
+          buttons: globalColors.lightSecondMain,
+        },
       }}
     >
       {children}
diff --git a/packages/shared/components/access-right-select/data.ts b/packages/shared/components/access-right-select/data.ts
index 7490efa5ad..9f23c1478c 100644
--- a/packages/shared/components/access-right-select/data.ts
+++ b/packages/shared/components/access-right-select/data.ts
@@ -33,6 +33,7 @@
 // import AccessNoneReactSvgUrl from "PUBLIC_DIR/images/access.none.react.svg?url";
 
 import { TOption } from "../combobox";
+import { globalColors } from "../../themes";
 
 export const data: TOption[] = [
   {
@@ -40,14 +41,14 @@ export const data: TOption[] = [
     label: "Room administrator",
     description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
     quota: "free",
-    color: "#20D21F",
+    color: globalColors.tickColor,
   },
   {
     key: "key2",
     label: "Full access",
     description: `Edit, upload, create, view, download, delete files and folders.`,
     quota: "paid",
-    color: "#EDC409",
+    color: globalColors.favoritesStatus,
   },
 
   { key: "key3", label: "", isSeparator: true },
diff --git a/packages/shared/components/all/All.stories.tsx b/packages/shared/components/all/All.stories.tsx
index 554dd8ebba..041cb49819 100644
--- a/packages/shared/components/all/All.stories.tsx
+++ b/packages/shared/components/all/All.stories.tsx
@@ -61,6 +61,7 @@ import { Text } from "../text";
 import { Toast, toastr } from "../toast";
 import { ToggleContent } from "../toggle-content";
 import { Tooltip } from "../tooltip";
+import { globalColors } from "../../themes";
 
 const arrayItems = [
   {
@@ -259,7 +260,7 @@ const Template = () => (
                 <Text isBold fontSize="16px">
                   {arrayUsers[+content].name}
                 </Text>
-                <Text color="#A3A9AE" fontSize="13px">
+                <Text color={globalColors.gray} fontSize="13px">
                   {arrayUsers[+content].email}
                 </Text>
                 <Text fontSize="13px">{arrayUsers[+content].position}</Text>
@@ -302,40 +303,6 @@ const Template = () => (
           }
         />
       </div>
-      {/*
-          <div style={{ padding: "8px 0" }}>
-          <ContextMenuButton
-            iconName={VerticalDotsReactSvgUrl}
-            size={16}
-            color="#A3A9AE"
-            isDisabled={false}
-            title="Actions"
-            getData={() => [
-              {
-                key: "key",
-                label: "label",
-                onClick: () => {}
-              }
-            ]}
-          />
-        </div>
-        */}
-      {/* <div style={{ padding: "8px 0" }}>
-          <div style={{ display: "flex" }}>
-            <div style={{ marginRight: 16 }}>
-              <IconButton
-                size="25"
-                isDisabled={false}
-                onClick={() => {}}
-                iconName={VerticalDotsReactSvgUrl}
-                isFill
-                isClickable={false}
-              />
-            </div>
-            <HelpButton tooltipContent="Paste you tooltip content here" />
-          </div>
-        </div>
-        */}
     </div>
     <div style={{ justifySelf: "center" }}>
       <div style={{ padding: "8px 0" }}>
@@ -386,26 +353,6 @@ const Template = () => (
         </StringValue> */}
       </div>
 
-      {/* <div style={{ padding: "8px 0" }}>
-        <DatePicker
-          onChange={(date) => {
-            console.log("Selected date", date);
-          }}
-          selectedDate={new Date()}
-          minDate={new Date("1970/01/01")}
-          maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
-          isDisabled={false}
-          isReadOnly={false}
-          hasError={false}
-          isOpen={false}
-          themeColor="#ED7309"
-          locale="en"
-          setSelectedDate={(date) => {
-            console.log("Selected date", date);
-          }}
-        />
-      </div> */}
-
       <div style={{ padding: "8px 0" }}>
         {/* <StringValue>
           {({ value, set }: any) => ( */}
@@ -491,7 +438,6 @@ const Template = () => (
       <div style={{ padding: "8px 0" }}>
         <Calendar
           onChange={() => {}}
-          //   themeColor="#ED7309"
           selectedDate={moment()}
           minDate={new Date("1970/01/01")}
           maxDate={new Date("3000/01/01")}
diff --git a/packages/shared/components/article-item/ArticleItem.styled.ts b/packages/shared/components/article-item/ArticleItem.styled.ts
index adab359b39..0170614a69 100644
--- a/packages/shared/components/article-item/ArticleItem.styled.ts
+++ b/packages/shared/components/article-item/ArticleItem.styled.ts
@@ -27,7 +27,7 @@
 import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
-import { Base, TColorScheme } from "../../themes";
+import { Base, TColorScheme, globalColors } from "../../themes";
 import { tablet } from "../../utils";
 
 import { Text } from "../text";
@@ -73,7 +73,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
     font-weight: 600;
     font-size: 11px;
     line-height: 14px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.catalogItem.header.color};
   }
 
   @media ${tablet} {
@@ -93,7 +93,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
           line-height: 1px;
           height: 1px;
 
-          background: #d0d5da;
+          background: ${props.theme.catalogItem.header.background};
         }
       `}
   }
@@ -343,7 +343,7 @@ const StyledArticleItemContainer = styled.div<{
       props.theme.catalogItem.container.tablet.marginBottom};
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .catalog-item__icon {
     display: none;
diff --git a/packages/shared/components/article/Article.styled.ts b/packages/shared/components/article/Article.styled.ts
index 808a0c5f4f..d7eac569d5 100644
--- a/packages/shared/components/article/Article.styled.ts
+++ b/packages/shared/components/article/Article.styled.ts
@@ -31,7 +31,7 @@ import CrossIcon from "PUBLIC_DIR/images/icons/17/cross.react.svg";
 
 import { mobile, tablet, desktop } from "../../utils";
 
-import { Base, TColorScheme } from "../../themes";
+import { Base, TColorScheme, globalColors } from "../../themes";
 
 const StyledArticle = styled.article<{
   showText?: boolean;
@@ -150,7 +150,7 @@ const StyledArticleHeader = styled.div<{ showText?: boolean }>`
     padding: 12px 0;
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledArticleHeader.defaultProps = { theme: Base };
@@ -411,7 +411,7 @@ const StyledHideArticleMenuButton = styled.div<{
 
   inset-inline-start: 0;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   min-width: ${({ showText }) => (showText ? "243px" : "60px")};
   max-width: ${({ showText }) => (showText ? "243px" : "60px")};
diff --git a/packages/shared/components/avatar/Avatar.styled.ts b/packages/shared/components/avatar/Avatar.styled.ts
index 1f3cdac4f4..dc632177aa 100644
--- a/packages/shared/components/avatar/Avatar.styled.ts
+++ b/packages/shared/components/avatar/Avatar.styled.ts
@@ -26,7 +26,7 @@
 
 import styled from "styled-components";
 
-import { Base, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { commonIconsStyles, NoUserSelect } from "../../utils";
 
 import { CameraReactSvg } from "./svg";
@@ -212,7 +212,7 @@ const StyledAvatar = styled.div<{ size: AvatarSize; theme: TTheme }>`
   font-family: ${(props) => props.theme.fontFamily};
   font-style: normal;
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .admin_icon {
     rect:nth-child(1) {
diff --git a/packages/shared/components/badge/badge.stories.tsx b/packages/shared/components/badge/badge.stories.tsx
index 1511dae0c5..28203bafac 100644
--- a/packages/shared/components/badge/badge.stories.tsx
+++ b/packages/shared/components/badge/badge.stories.tsx
@@ -27,6 +27,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Badge } from "./Badge";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Badge",
@@ -83,7 +84,7 @@ export const HighBadge: Story = {
   args: {
     type: "high",
     label: "High",
-    backgroundColor: "#f2675a",
+    backgroundColor: globalColors.mainRed,
   },
   argTypes: {
     type: { control: "radio" },
diff --git a/packages/shared/components/button/Button.styled.tsx b/packages/shared/components/button/Button.styled.tsx
index 88b0cf6441..bf1e3609f9 100644
--- a/packages/shared/components/button/Button.styled.tsx
+++ b/packages/shared/components/button/Button.styled.tsx
@@ -28,7 +28,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { NoUserSelect } from "../../utils";
-import { Base, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { ButtonProps, ButtonThemeProps } from "./Button.types";
 import { ButtonSize } from "./Button.enums";
 
@@ -211,7 +211,7 @@ const StyledButton = styled(ButtonWrapper).attrs((props: ButtonProps) => ({
   overflow: ${(props) => props.theme.button.overflow};
   text-overflow: ${(props) => props.theme.button.textOverflow};
   white-space: ${(props) => props.theme.button.whiteSpace};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     !props.isDisabled &&
diff --git a/packages/shared/components/calendar/calendar.test.tsx b/packages/shared/components/calendar/calendar.test.tsx
index e4ec62b1b3..373920bfdd 100644
--- a/packages/shared/components/calendar/calendar.test.tsx
+++ b/packages/shared/components/calendar/calendar.test.tsx
@@ -34,7 +34,7 @@ import "@testing-library/jest-dom";
 
 // const baseCalendarProps = {
 //   isDisabled: false,
-//   themeColor: "#ED7309",
+//   themeColor: "",
 //   selectedDate: moment(),
 //   openToDate: moment(),
 //   minDate: new Date("1970/01/01"),
@@ -50,8 +50,8 @@ import "@testing-library/jest-dom";
 //     { key: "en_2", value: "We", color: "" },
 //     { key: "en_3", value: "Th", color: "" },
 //     { key: "en_4", value: "Fr", color: "" },
-//     { key: "en_5", value: "Sa", color: "#A3A9AE" },
-//     { key: "en_6", value: "Su", color: "#A3A9AE" },
+//     { key: "en_5", value: "Sa", color: "" },
+//     { key: "en_6", value: "Su", color: "" },
 //   ],
 //   size: "base",
 // };
@@ -217,9 +217,9 @@ describe("Calendar tests:", () => {
   // it("Calendar themeColor test", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ themeColor: string; isDisabled: boolean; s... Remove this comment to see the full error message
-  //     <Calendar {...baseCalendarProps} themeColor={"#fff"} />,
+  //     <Calendar {...baseCalendarProps} themeColor={""} />,
   //   );
-  //   expect(wrapper.props().themeColor).toEqual("#fff");
+  //   expect(wrapper.props().themeColor).toEqual("");
   // });
 
   // it("Calendar locale test", () => {
diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
index 2ffc39955f..4cb0c3108a 100644
--- a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
+++ b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet, mobile } from "../../utils/device";
 
 const BannerWrapper = styled.div<{
@@ -67,7 +67,7 @@ const BannerWrapper = styled.div<{
     top: 18px;
 
     path {
-      fill: "#A3A9AE";
+      fill: ${globalColors.gray};
     }
   }
 `;
diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx
index 73ab168d7f..c7626b008f 100644
--- a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx
+++ b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx
@@ -42,6 +42,7 @@ import {
 import { CampaignsBannerProps } from "./CampaignsBanner.types";
 
 import useFitText from "./useFitText";
+import { globalColors } from "../../themes";
 
 const CampaignsBanner = (props: CampaignsBannerProps) => {
   const {
@@ -76,7 +77,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
         {hasTitle && (
           <TextComponent
             className="header"
-            color={title?.color || "#333"}
+            color={title?.color || globalColors.black}
             fontSize={title?.fontSize}
             fontWeight={title?.fontWeight}
             lineHeight="12px"
@@ -87,7 +88,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
         <div>
           {hasBodyText && (
             <TextComponent
-              color={body?.color || "#333"}
+              color={body?.color || globalColors.black}
               fontSize={fontSize}
               fontWeight={body?.fontWeight}
             >
@@ -96,7 +97,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
           )}
           {hasText && (
             <TextComponent
-              color={text?.color || "#333"}
+              color={text?.color || globalColors.black}
               fontSize={text?.fontSize}
               fontWeight={text?.fontWeight}
             >
diff --git a/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts b/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
index 50dd27f89c..9466a048bf 100644
--- a/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
+++ b/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
@@ -24,6 +24,8 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { globalColors } from "../../../themes";
+
 export const translates = {
   Header: "ONLYOFFICE for developers",
   SubHeader:
@@ -33,21 +35,21 @@ export const translates = {
 };
 
 export const config = {
-  borderColor: "#388BDE",
+  borderColor: globalColors.lightBlueMain,
   title: {
-    color: "#4781D1",
+    color: globalColors.lightBlueMain,
     fontSize: "12px",
     fontWeight: "600",
   },
   body: {
     fontSize: "13px",
     fontWeight: "600",
-    color: "#333",
+    color: globalColors.black,
   },
   action: {
     isButton: true,
-    color: "#fff",
-    backgroundColor: "#388BDE",
+    color: globalColors.white,
+    backgroundColor: globalColors.lightBlueMain,
     fontSize: "12px",
     fontWeight: "700",
     type: "open-url",
diff --git a/packages/shared/components/checkbox/Checkbox.styled.ts b/packages/shared/components/checkbox/Checkbox.styled.ts
index fed203c80d..a7dc095662 100644
--- a/packages/shared/components/checkbox/Checkbox.styled.ts
+++ b/packages/shared/components/checkbox/Checkbox.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledLabel = styled.label<{
   isDisabled: boolean;
@@ -41,7 +41,7 @@ const StyledLabel = styled.label<{
   -o-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .checkbox {
     margin-inline-end: 12px;
diff --git a/packages/shared/components/code-input/CodeInput.styled.ts b/packages/shared/components/code-input/CodeInput.styled.ts
index 7bf225deb6..9c74eb9e28 100644
--- a/packages/shared/components/code-input/CodeInput.styled.ts
+++ b/packages/shared/components/code-input/CodeInput.styled.ts
@@ -64,7 +64,7 @@ const InputWrapper = styled.div`
   }
 
   input:focus {
-    border: 1px solid #5299e0;
+    border: ${(props) => props.theme.codeInput.focusBorder};
     outline: none;
   }
 
diff --git a/packages/shared/components/color-input/ColorInput.stories.tsx b/packages/shared/components/color-input/ColorInput.stories.tsx
index 48d85700f9..9d65e63bdf 100644
--- a/packages/shared/components/color-input/ColorInput.stories.tsx
+++ b/packages/shared/components/color-input/ColorInput.stories.tsx
@@ -32,6 +32,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ColorInput } from "./ColorInput";
 import { ColorInputProps } from "./ColorInput.types";
 import { InputSize } from "../text-input/TextInput.enums";
+import { globalColors } from "../../themes";
 
 const ColorInputContainer = styled.div`
   height: 300px;
@@ -78,7 +79,7 @@ const Template = ({ ...args }: ColorInputProps) => {
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
-    defaultColor: "#4781D1",
+    defaultColor: globalColors.lightBlueMain,
     handleChange: (color) => {
       console.log(color);
     },
diff --git a/packages/shared/components/color-input/ColorInput.tsx b/packages/shared/components/color-input/ColorInput.tsx
index 48f2c5f577..c0c6db09d0 100644
--- a/packages/shared/components/color-input/ColorInput.tsx
+++ b/packages/shared/components/color-input/ColorInput.tsx
@@ -33,6 +33,7 @@ import { DropDown } from "../drop-down";
 
 import { ColorInputProps } from "./ColorInput.types";
 import { ColorPicker } from "../color-picker";
+import { globalColors } from "../../themes";
 
 const ColorInput = ({
   className,
@@ -45,7 +46,9 @@ const ColorInput = ({
   hasError,
   hasWarning,
 }: ColorInputProps) => {
-  const [color, setColor] = useState(defaultColor || "#4781D1");
+  const [color, setColor] = useState(
+    defaultColor || globalColors.lightBlueMain,
+  );
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
   const closePicker = () => setIsPickerOpen(false);
diff --git a/packages/shared/components/color-picker/ColorPicker.stories.tsx b/packages/shared/components/color-picker/ColorPicker.stories.tsx
index 9c93a2d49e..563f4c632d 100644
--- a/packages/shared/components/color-picker/ColorPicker.stories.tsx
+++ b/packages/shared/components/color-picker/ColorPicker.stories.tsx
@@ -31,6 +31,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { ColorPicker } from "./ColorPicker";
 import { ColorPickerProps } from "./ColorPicker.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ColorPicker",
@@ -57,7 +58,7 @@ export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     isPickerOnly: false,
-    appliedColor: "#4781D1",
+    appliedColor: globalColors.lightBlueMain,
     onClose: () => console.log("close"),
     applyButtonLabel: "Apply",
     cancelButtonLabel: "Cancel",
diff --git a/packages/shared/components/color-picker/ColorPicker.styled.tsx b/packages/shared/components/color-picker/ColorPicker.styled.tsx
index 24ffe4dc2d..a7c62d2794 100644
--- a/packages/shared/components/color-picker/ColorPicker.styled.tsx
+++ b/packages/shared/components/color-picker/ColorPicker.styled.tsx
@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { isMobileOnly } from "react-device-detect";
+import { globalColors } from "../../themes";
 
 const Wrapper = styled.div`
   .save-button {
@@ -67,19 +68,23 @@ const Wrapper = styled.div`
     width: 30px;
     height: 30px;
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
-    border: 8px solid #fff;
+    border: 8px solid ${globalColors.white};
   }
 
   .hex-value {
     height: 32px;
     outline: none;
     padding: 6px 8px;
-    border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
+    border: 1px solid
+      ${(props) =>
+        props.theme.isBase
+          ? globalColors.grayStrong
+          : globalColors.grayDarkStrong};
     border-radius: 3px;
     width: 100%;
     box-sizing: border-box;
-    background: ${(props) => !props.theme.isBase && "#282828"};
-    color: ${(props) => !props.theme.isBase && "#5C5C5C"};
+    background: ${(props) => !props.theme.isBase && globalColors.darkGrayLight};
+    color: ${(props) => !props.theme.isBase && globalColors.grayDarkText};
   }
 
   .hex-value-label {
diff --git a/packages/shared/components/color-picker/ColorPicker.tsx b/packages/shared/components/color-picker/ColorPicker.tsx
index 358a121a30..2b60675e75 100644
--- a/packages/shared/components/color-picker/ColorPicker.tsx
+++ b/packages/shared/components/color-picker/ColorPicker.tsx
@@ -32,6 +32,7 @@ import { Button } from "../button";
 import Wrapper from "./ColorPicker.styled";
 import { ColorPickerProps } from "./ColorPicker.types";
 import { ButtonSize } from "../button/Button.enums";
+import { globalColors } from "../../themes";
 
 const ColorPicker = ({
   className,
@@ -45,7 +46,9 @@ const ColorPicker = ({
   handleChange,
   hexCodeLabel,
 }: ColorPickerProps) => {
-  const [color, setColor] = useState(appliedColor || "#4781D1");
+  const [color, setColor] = useState(
+    appliedColor || globalColors.lightBlueMain,
+  );
 
   useEffect(() => {
     if (!isPickerOnly && appliedColor && appliedColor !== color) {
@@ -105,7 +108,7 @@ ColorPicker.defaultProps = {
   isPickerOnly: false,
   onClose: () => {},
   onApply: () => {},
-  appliedColor: "#4781D1",
+  appliedColor: globalColors.lightBlueMain,
   applyButtonLabel: "Apply",
   cancelButtonLabel: "Cancel",
   hexCodeLabel: "Hex code",
diff --git a/packages/shared/components/color-theme/styled-components/indicatorLoader.ts b/packages/shared/components/color-theme/styled-components/indicatorLoader.ts
index e0beea743b..b9ca67affb 100644
--- a/packages/shared/components/color-theme/styled-components/indicatorLoader.ts
+++ b/packages/shared/components/color-theme/styled-components/indicatorLoader.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base, TColorScheme, TTheme } from "../../../themes";
+import { Base, TColorScheme, TTheme, globalColors } from "../../../themes";
 import StyledWrapper from "../sub-components/StyledWrapper";
 
 const getDefaultStyles = ({
@@ -40,12 +40,12 @@ const getDefaultStyles = ({
     #ipl-progress-indicator {
       background-color: ${theme.isBase
         ? $currentColorScheme.main?.accent
-        : "#FFFFFF"};
+        : globalColors.white};
 
       &:hover {
         background-color: ${theme.isBase
           ? $currentColorScheme.main?.accent
-          : "#FFFFFF"};
+          : globalColors.white};
       }
     }
   `;
diff --git a/packages/shared/components/color-theme/styled-components/progress.ts b/packages/shared/components/color-theme/styled-components/progress.ts
index 61a2272895..85e203c2d1 100644
--- a/packages/shared/components/color-theme/styled-components/progress.ts
+++ b/packages/shared/components/color-theme/styled-components/progress.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../../themes";
+import { Base, globalColors } from "../../../themes";
 
 import StyledPreparationPortalProgress from "../sub-components/StyledPreparationPortalProgress";
 import { ProgressColorTheme } from "../ColorTheme.types";
@@ -36,7 +36,7 @@ const getDefaultStyles = ({ $currentColorScheme, theme }: ProgressColorTheme) =>
     .preparation-portal_progress-line {
       background: ${theme.isBase
         ? $currentColorScheme.main?.accent
-        : "#FFFFFF"};
+        : globalColors.white};
     }
   `;
 
diff --git a/packages/shared/components/color-theme/sub-components/LoginContainer.ts b/packages/shared/components/color-theme/sub-components/LoginContainer.ts
index f19d26fac6..dbc2a789d6 100644
--- a/packages/shared/components/color-theme/sub-components/LoginContainer.ts
+++ b/packages/shared/components/color-theme/sub-components/LoginContainer.ts
@@ -135,32 +135,6 @@ const LoginContainer = styled.div<{
     margin-top: 32px;
   }
 
-  .code-input-bar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    margin-top: 16px;
-    padding: 14px 12px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 11px;
-    line-height: 12px;
-    color: #333;
-    svg {
-      margin: 8px;
-    }
-  }
-
-  .code-input-bar.warning {
-    background: #f7e6be;
-    margin-bottom: 16px;
-  }
-
-  .code-input-bar.error {
-    background: #f7cdbe;
-  }
-
   .auth-form-container {
     width: 100%;
 
@@ -235,7 +209,7 @@ const LoginContainer = styled.div<{
     .login-bottom-border {
       width: 100%;
       height: 1px;
-      background: #eceef1;
+      background: ${(props) => props.theme.login.orLineColor};
     }
 
     .login-bottom-text {
diff --git a/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts b/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts
index 9959dee318..8fb10417fa 100644
--- a/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts
+++ b/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../../themes";
+import { Base, globalColors } from "../../../themes";
 
 const selectedItemTag = css`
   background: ${(props) =>
@@ -55,7 +55,7 @@ const StyledFilterBlockItemTag = styled.div<{ isSelected?: boolean }>`
 
   ${(props) => props.isSelected && selectedItemTag}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledFilterBlockItemTag.defaultProps = { theme: Base };
diff --git a/packages/shared/components/combobox/Combobox.styled.ts b/packages/shared/components/combobox/Combobox.styled.ts
index 3cde436921..0e433a50d0 100644
--- a/packages/shared/components/combobox/Combobox.styled.ts
+++ b/packages/shared/components/combobox/Combobox.styled.ts
@@ -28,7 +28,7 @@ import styled, { css } from "styled-components";
 
 import TriangleDownIcon from "PUBLIC_DIR/images/triangle.down.react.svg";
 
-import { Base, TColorScheme, TTheme } from "../../themes";
+import { Base, TColorScheme, TTheme, globalColors } from "../../themes";
 import { mobile, NoUserSelect, commonIconsStyles } from "../../utils";
 
 import { Loader } from "../loader";
@@ -88,7 +88,7 @@ const StyledComboBox = styled.div<{
 
   position: relative;
   outline: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   padding: ${(props) => (props.withoutPadding ? "0" : "4px 0")};
 
@@ -180,7 +180,7 @@ const StyledComboButton = styled.div<{
 
   gap: ${(props) => props.type && "4px"};
   justify-content: center;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   height: ${(props) =>
     props.noBorder
diff --git a/packages/shared/components/combobox/combobox.stories.tsx b/packages/shared/components/combobox/combobox.stories.tsx
index aeaacef45c..7978897bbc 100644
--- a/packages/shared/components/combobox/combobox.stories.tsx
+++ b/packages/shared/components/combobox/combobox.stories.tsx
@@ -27,130 +27,22 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
-// import NavLogoIcon from "PUBLIC_DIR/images/nav.logo.opened.react.svg";
-// import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
-// import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
-// import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
-
-// import { IconSizeType } from "../../utils";
-// import { DropDownItem } from "../drop-down-item";
 import { ComboBox } from "./ComboBox";
-// import RadioButton from "../radio-button";
-
-// import ComboBoxDocs from "./Combobox.docs.mdx";
 import { ComboboxProps } from "./Combobox.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ComboBox",
   component: ComboBox,
-  // tags: ["autodocs"],
-  parameters: {
-    docs: {
-      // page: ComboBoxDocs,
-    },
-  },
 } satisfies Meta<typeof ComboBox>;
 type Story = StoryObj<typeof ComboBox>;
 
 export default meta;
 
-// const comboOptions = [
-//   {
-//     key: 1,
-//     icon: CatalogEmployeeReactSvgUrl,
-//     label: "Option 1",
-//   },
-//   {
-//     key: 2,
-//     icon: CatalogGuestReactSvgUrl,
-//     label: "Option 2",
-//   },
-//   {
-//     key: 3,
-//     disabled: true,
-//     label: "Option 3",
-//   },
-//   {
-//     key: 4,
-//     label: "Option 4",
-//   },
-//   {
-//     key: 5,
-//     icon: CopyReactSvgUrl,
-//     label: "Option 5",
-//   },
-//   {
-//     key: 6,
-//     label: "Option 6",
-//   },
-//   {
-//     key: 7,
-//     label: "Option 7",
-//   },
-// ];
-
-// const childrenArr = [];
-
-// const advancedOptions = (
-//   <>
-//     <DropDownItem key="1" noHover>
-//       {/* <RadioButton value="asc" name="first" label="A-Z" isChecked /> */}
-//     </DropDownItem>
-//     <DropDownItem key="2" noHover>
-//       {/* <RadioButton value="desc" name="first" label="Z-A" /> */}
-//     </DropDownItem>
-//     <DropDownItem key="3" isSeparator />
-//     <DropDownItem key="4" noHover>
-//       {/* <RadioButton value="first" name="second" label="First name" /> */}
-//     </DropDownItem>
-//     <DropDownItem key="5" noHover>
-//       {/* <RadioButton
-//         value="last"
-//         name="second"
-//         label="Last name"
-//         isChecked
-//       /> */}
-//     </DropDownItem>
-//   </>
-// );
-
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return <div style={{ height: "220px" }}>{children}</div>;
 };
 
-// const childrenItems = childrenArr.length > 0 ? childrenArr : null;
-
-// const BadgeTypeTemplate = (args: ComboboxProps) => (
-//   <Wrapper>
-//     <ComboBox
-//       {...args}
-//       fixedDirection
-//       isDefaultMode={false}
-//       options={[
-//         { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-//         { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
-//         {
-//           key: 3,
-//           label: "2nd turn",
-//           backgroundColor: "#FFFFFF",
-//           color: "#555F65",
-//           border: "#4781D1",
-//         },
-//         {
-//           key: 4,
-//           label: "3rd turn",
-//           backgroundColor: "#FFFFFF",
-//           color: "#555F65",
-//           border: "#4781D1",
-//         },
-//       ]}
-//       selectedOption={{
-//         key: 0,
-//         label: "Select",
-//       }}
-//     />
-//   </Wrapper>
-// );
 const Template = (args: ComboboxProps) => (
   <Wrapper>
     <ComboBox
@@ -170,70 +62,36 @@ const Template = (args: ComboboxProps) => (
   </Wrapper>
 );
 
-// const BaseOptionsTemplate = (args: ComboboxProps) => (
-//   <Wrapper>
-//     <ComboBox
-//       {...args}
-//       isDefaultMode={false}
-//       directionY="both"
-//       fixedDirection
-//       options={comboOptions}
-//       onSelect={(option: any) => args.onSelect(option)}
-//       selectedOption={{
-//         key: 0,
-//         label: "Select",
-//         default: true,
-//       }}
-//     >
-//       {childrenItems}
-//     </ComboBox>
-//   </Wrapper>
-// );
-
-// const AdvancedOptionsTemplate = (args: ComboboxProps) => {
-//   const { onSelect } = args;
-//   return (
-//     <Wrapper>
-//       <ComboBox
-//         {...args}
-//         isDefaultMode={false}
-//         fixedDirection
-//         directionY="both"
-//         options={[]}
-//         advancedOptions={advancedOptions}
-//         onSelect={(option?: TOption) => onSelect(option)}
-//         selectedOption={{
-//           key: 0,
-//           label: "Select",
-//           default: true,
-//         }}
-//       >
-//         <NavLogoIcon size={IconSizeType.medium} key="comboIcon" />
-//       </ComboBox>
-//     </Wrapper>
-//   );
-// };
-
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     scaled: false,
     options: [
-      { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-      { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
+      {
+        key: 1,
+        label: "Open",
+        backgroundColor: globalColors.lightBlueMain,
+        color: globalColors.white,
+      },
+      {
+        key: 2,
+        label: "Done",
+        backgroundColor: globalColors.black,
+        color: globalColors.white,
+      },
       {
         key: 3,
         label: "2nd turn",
-        backgroundColor: "#FFFFFF",
-        color: "#555F65",
-        border: "#4781D1",
+        backgroundColor: globalColors.white,
+        color: globalColors.grayText,
+        border: globalColors.lightBlueMain,
       },
       {
         key: 4,
         label: "3rd turn",
-        backgroundColor: "#FFFFFF",
-        color: "#555F65",
-        border: "#4781D1",
+        backgroundColor: globalColors.white,
+        color: globalColors.grayText,
+        border: globalColors.lightBlueMain,
       },
     ],
     selectedOption: {
@@ -243,54 +101,3 @@ export const Default: Story = {
     dropDownMaxHeight: 1500,
   },
 };
-
-// export const BaseOption: Story = {
-//   render: (args) => <BaseOptionsTemplate {...args} />,
-//   args: {
-//     options: [
-//       { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-//       { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
-//       {
-//         key: 3,
-//         label: "2nd turn",
-//         backgroundColor: "#FFFFFF",
-//         color: "#555F65",
-//         border: "#4781D1",
-//       },
-//       {
-//         key: 4,
-//         label: "3rd turn",
-//         backgroundColor: "#FFFFFF",
-//         color: "#555F65",
-//         border: "#4781D1",
-//       },
-//     ],
-//     selectedOption: {
-//       key: 0,
-//       label: "Select",
-//     },
-//     scaledOptions: false,
-//     scaled: false,
-//     noBorder: false,
-//     isDisabled: false,
-//   },
-// };
-
-// export const advancedOption = AdvancedOptionsTemplate.bind({});
-
-// advancedOption.args = {
-//   isDisabled: false,
-//   scaled: false,
-//   size: "content",
-//   directionX: "right",
-//   directionY: "bottom",
-// };
-
-// export const badgeType = BadgeTypeTemplate.bind({});
-
-// badgeType.args = {
-//   scaled: false,
-//   type: "badge",
-//   size: "content",
-//   scaledOptions: true,
-// };
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
index 4599e616a8..32b609eb54 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
@@ -26,13 +26,13 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledOuter = styled.div<{ displayIconBorder?: boolean }>`
   display: inline-block;
   position: relative;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.displayIconBorder &&
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
index c400d401f1..1fdcde9deb 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
@@ -32,6 +32,7 @@ import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?u
 
 import { ContextMenuButton } from "./ContextMenuButton";
 import { ContextMenuButtonDisplayType } from "./ContextMenuButton.enums";
+import { globalColors } from "../../themes";
 
 const baseData = () => [
   {
@@ -45,7 +46,7 @@ const baseProps = {
   title: "Actions",
   iconName: VerticalDotsReactSvgUrl,
   size: 16,
-  color: "#A3A9AE",
+  color: globalColors.gray,
   getData: baseData,
   isDisabled: false,
 };
diff --git a/packages/shared/components/context-menu/ContextMenu.stories.tsx b/packages/shared/components/context-menu/ContextMenu.stories.tsx
index c2f5bf9b76..facf8bfd6f 100644
--- a/packages/shared/components/context-menu/ContextMenu.stories.tsx
+++ b/packages/shared/components/context-menu/ContextMenu.stories.tsx
@@ -30,6 +30,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
 
 import { ContextMenu, ContextMenuModel } from ".";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ContextMenu",
@@ -183,11 +184,11 @@ const Template = () => {
         style={{
           width: "200px",
           height: "200px",
-          backgroundColor: "#7dadfa",
+          backgroundColor: globalColors.lightSecondMain,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          color: "#fff",
+          color: globalColors.white,
           fontSize: "18px",
         }}
         onContextMenu={(e) => {
diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts
index 83fb413934..f22de00da2 100644
--- a/packages/shared/components/context-menu/ContextMenu.styled.ts
+++ b/packages/shared/components/context-menu/ContextMenu.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { tablet, mobile, getCorrectFourValuesStyle } from "../../utils";
 
 const styledTabletView = css<{ articleWidth: number }>`
@@ -124,7 +124,7 @@ const StyledContextMenu = styled.div<{
     box-sizing: border-box;
     background: none;
     outline: 0 !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     .icon-wrapper {
       display: flex;
@@ -232,7 +232,7 @@ const StyledContextMenu = styled.div<{
     background: none;
     user-select: none;
     outline: 0 !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     font-weight: ${(props) => props.theme.dropDownItem.fontWeight};
     font-size: ${(props) => props.theme.dropDownItem.fontSize};
diff --git a/packages/shared/components/date-picker/DatePicker.styled.ts b/packages/shared/components/date-picker/DatePicker.styled.ts
index 8258d1d53a..3c526985be 100644
--- a/packages/shared/components/date-picker/DatePicker.styled.ts
+++ b/packages/shared/components/date-picker/DatePicker.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { mobile } from "../../utils";
 
 import { Calendar } from "../calendar";
@@ -105,7 +105,7 @@ const Wrapper = styled.div`
       height: 12px;
       padding: 0 10px 0 2px;
       path {
-        fill: #657077;
+        fill: ${globalColors.lightGrayDark};
       }
     }
   }
diff --git a/packages/shared/components/date-picker/DatePicker.test.tsx b/packages/shared/components/date-picker/DatePicker.test.tsx
index de37e72afe..a23adb2f3f 100644
--- a/packages/shared/components/date-picker/DatePicker.test.tsx
+++ b/packages/shared/components/date-picker/DatePicker.test.tsx
@@ -118,8 +118,8 @@ describe("DatePicker tests", () => {
   // // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
   // it("DatePicker themeColor test", () => {
   //   // @ts-expect-error TS(2322): Type '{ themeColor: string; }' is not assignable t... Remove this comment to see the full error message
-  //   const wrapper = mount(<DatePicker themeColor={"#fff"} />);
-  //   expect(wrapper.props().themeColor).toEqual("#fff");
+  //   const wrapper = mount(<DatePicker themeColor={""} />);
+  //   expect(wrapper.props().themeColor).toEqual("");
   // });
 
   // // @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
@@ -228,7 +228,6 @@ describe("DatePicker tests", () => {
   //     isDisabled: false,
   //     isReadOnly: false,
   //     hasError: false,
-  //     themeColor: "#ED7309",
   //     locale: "en",
   //   };
 
diff --git a/packages/shared/components/date-picker/DatePicker.tsx b/packages/shared/components/date-picker/DatePicker.tsx
index de51d7719c..63381dd553 100644
--- a/packages/shared/components/date-picker/DatePicker.tsx
+++ b/packages/shared/components/date-picker/DatePicker.tsx
@@ -40,6 +40,7 @@ import {
   Wrapper,
 } from "./DatePicker.styled";
 import { DatePickerProps } from "./DatePicker.types";
+import { globalColors } from "../../themes";
 
 const DatePicker = (props: DatePickerProps) => {
   const {
@@ -136,7 +137,7 @@ const DatePicker = (props: DatePickerProps) => {
             className="mr-8 add-delivery-date-button"
             iconName={CalendarIconUrl}
           />
-          <Text isInline fontWeight={600} color="#A3A9AE">
+          <Text isInline fontWeight={600} color={globalColors.gray}>
             {selectDateText}
           </Text>
         </DateSelector>
diff --git a/packages/shared/components/date-time-picker/DateTimerPicker.styled.ts b/packages/shared/components/date-time-picker/DateTimerPicker.styled.ts
index 7c3c25bc4e..87b992f929 100644
--- a/packages/shared/components/date-time-picker/DateTimerPicker.styled.ts
+++ b/packages/shared/components/date-time-picker/DateTimerPicker.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const Selectors = styled.div<{ hasError?: boolean }>`
   position: relative;
@@ -55,7 +55,8 @@ const TimeCell = styled.span<{ hasError?: boolean }>`
   width: 73px;
   height: 32px;
 
-  background-color: ${(props) => (props.theme.isBase ? "#eceef1" : "#242424")};
+  background-color: ${(props) =>
+    props.theme.isBase ? globalColors.grayLightMid : globalColors.grayDarkMid};
   border-radius: 3px;
 
   padding: 6px 8px;
diff --git a/packages/shared/components/drop-down-item/DropDownItem.styled.ts b/packages/shared/components/drop-down-item/DropDownItem.styled.ts
index 7ef88a5bc0..a0dfc1b8f4 100644
--- a/packages/shared/components/drop-down-item/DropDownItem.styled.ts
+++ b/packages/shared/components/drop-down-item/DropDownItem.styled.ts
@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet } from "../../utils";
 
 const itemTruncate = css`
@@ -100,7 +100,7 @@ const StyledDropdownItem = styled.div<{
   text-decoration: none;
   user-select: none;
   outline: 0 !important;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .drop-down-item_icon {
     svg {
diff --git a/packages/shared/components/drop-down-item/DropDownItem.tsx b/packages/shared/components/drop-down-item/DropDownItem.tsx
index 75e208d6b5..f4d75d2b70 100644
--- a/packages/shared/components/drop-down-item/DropDownItem.tsx
+++ b/packages/shared/components/drop-down-item/DropDownItem.tsx
@@ -43,6 +43,7 @@ import {
   ElementWrapper,
 } from "./DropDownItem.styled";
 import { DropDownItemProps } from "./DropDownItem.types";
+import { globalColors } from "../../themes";
 
 const DropDownItem = (props: DropDownItemProps) => {
   const {
@@ -170,7 +171,7 @@ const DropDownItem = (props: DropDownItemProps) => {
             fontSize="9px"
             isHovered={false}
             borderRadius="50px"
-            backgroundColor={theme.isBase ? "#533ED1" : "#5447A3"}
+            backgroundColor={globalColors.mainPurple}
             label={t("Common:BetaLabel")}
           />
         </WrapperBadge>
diff --git a/packages/shared/components/empty-view/EmptyView.styled.ts b/packages/shared/components/empty-view/EmptyView.styled.ts
index 7fa8a83fbd..47d30dcafb 100644
--- a/packages/shared/components/empty-view/EmptyView.styled.ts
+++ b/packages/shared/components/empty-view/EmptyView.styled.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { mobile } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 export const EmptyViewWrapper = styled.div`
   margin-inline: auto;
@@ -68,34 +69,34 @@ export const EmptyViewItemWrapper = styled.div`
 
   :nth-child(1) .ev-item__icon {
     rect {
-      color: #5299e0;
+      color: ${globalColors.lightSecondMain};
     }
     path {
-      color: #4781d1;
+      color: ${globalColors.lightBlueMain};
     }
   }
   :nth-child(2) .ev-item__icon {
     rect {
-      color: #2db482;
+      color: ${globalColors.mainGreen};
     }
     path {
-      color: #2db482;
+      color: ${globalColors.mainGreen};
     }
   }
   :nth-child(3) .ev-item__icon {
     rect {
-      color: #f97a0b;
+      color: ${globalColors.mainOrange};
     }
     path {
-      color: #f97a0b;
+      color: ${globalColors.mainOrange};
     }
   }
   :nth-child(4) .ev-item__icon {
     rect {
-      color: #6d4ec2;
+      color: ${globalColors.purple};
     }
     path {
-      color: #6d4ec2;
+      color: ${globalColors.purple};
     }
   }
 
diff --git a/packages/shared/components/error-container/ErrorContainer.styled.ts b/packages/shared/components/error-container/ErrorContainer.styled.ts
index 7f11f151ce..b4211a7de8 100644
--- a/packages/shared/components/error-container/ErrorContainer.styled.ts
+++ b/packages/shared/components/error-container/ErrorContainer.styled.ts
@@ -52,7 +52,7 @@ const StyledErrorContainer = styled.div<{ isEditor: boolean }>`
   box-sizing: border-box;
 
   .error_description_link {
-    color: #2da7db;
+    color: ${(props) => props.theme.errorContainer.linkColor};
     font-size: 13px;
     font-weight: 600;
   }
diff --git a/packages/shared/components/field-container/FieldContainer.stories.tsx b/packages/shared/components/field-container/FieldContainer.stories.tsx
index e1e92926aa..ce7545ae34 100644
--- a/packages/shared/components/field-container/FieldContainer.stories.tsx
+++ b/packages/shared/components/field-container/FieldContainer.stories.tsx
@@ -31,6 +31,7 @@ import { InputSize, InputType, TextInput } from "../text-input";
 
 import { FieldContainer } from "./FieldContainer";
 import { FieldContainerProps } from "./FieldContainer.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/FieldContainer",
@@ -84,7 +85,7 @@ export const Default: Story = {
     place: "top",
     errorMessage:
       "Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
-    errorColor: "#C96C27",
+    errorColor: globalColors.lightErrorStatus,
     errorMessageWidth: "293px",
     removeMargin: false,
     children: null,
diff --git a/packages/shared/components/file-input/FileInput.tsx b/packages/shared/components/file-input/FileInput.tsx
index 799e405aa9..a8454180d9 100644
--- a/packages/shared/components/file-input/FileInput.tsx
+++ b/packages/shared/components/file-input/FileInput.tsx
@@ -40,6 +40,7 @@ import { toastr } from "../toast";
 
 import StyledFileInput from "./FileInput.styled";
 import { FileInputProps } from "./FileInput.types";
+import { globalColors } from "../../themes";
 
 const FileInputPure = ({
   onInput,
@@ -183,7 +184,7 @@ const FileInputPure = ({
                       ? DocumentReactSvgUrl
                       : CatalogFolderReactSvgUrl
                   }
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                   size={iconSize}
                   isDisabled={isDisabled}
                 />
diff --git a/packages/shared/components/filling-role-selector/FillingRoleSelector.stories.tsx b/packages/shared/components/filling-role-selector/FillingRoleSelector.stories.tsx
index d566eabdd6..723003c39c 100644
--- a/packages/shared/components/filling-role-selector/FillingRoleSelector.stories.tsx
+++ b/packages/shared/components/filling-role-selector/FillingRoleSelector.stories.tsx
@@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { FillingRoleSelector } from "./FillingRoleSelector";
 import { FillingRoleSelectorProps } from "./FillingRoleSelector.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/FillingRoleSelector",
@@ -43,13 +44,13 @@ type Story = StoryObj<typeof FillingRoleSelector>;
 export default meta;
 
 const mockRoles = [
-  { id: "3", name: "Director", order: 3, color: "#BB85E7" },
-  { id: "2", name: "Accountant", order: 2, color: "#70D3B0" },
+  { id: "3", name: "Director", order: 3, color: globalColors.secondPurple },
+  { id: "2", name: "Accountant", order: 2, color: globalColors.secondGreen },
   {
     id: "1",
     name: "Employee",
     order: 1,
-    color: "#FBCC86",
+    color: globalColors.favoritesStatus,
     everyone: "@Everyone",
   },
 ];
diff --git a/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts b/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
index 6c30085235..db594cf61d 100644
--- a/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
+++ b/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import AddRoleButton from "PUBLIC_DIR/images/add.role.button.react.svg";
 import EveryoneRoleIcon from "PUBLIC_DIR/images/everyone.role.button.react.svg";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledFillingRoleSelector = styled.div`
   display: flex;
@@ -65,7 +65,7 @@ const StyledNumber = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
-  color: #a3a9ae;
+  color: ${globalColors.gray};
 `;
 
 const StyledAvatar = styled.img`
@@ -100,7 +100,7 @@ const StyledRole = styled.div`
 
 const StyledAssignedRole = styled.div`
   padding-inline-start: 4px;
-  color: rgba(170, 170, 170, 1);
+  color: ${globalColors.gray};
 
   ::before {
     content: "(";
@@ -122,13 +122,13 @@ const StyledEveryoneRoleContainer = styled.div`
     font-weight: 400;
     font-size: 10px;
     line-height: 14px;
-    color: #657077;
+    color: ${globalColors.lightGrayDark};
   }
 `;
 
 const StyledTooltip = styled.div`
-  background: #f8f7bf;
-  color: #333;
+  background: ${globalColors.lightToastInfo};
+  color: ${globalColors.black};
   border-radius: 6px;
   font-weight: 400;
   font-size: 12px;
diff --git a/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts b/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
index 5e0c3b039a..71f29f194e 100644
--- a/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
+++ b/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const FillingStatusContainer = styled.div<{
   isDone?: boolean;
@@ -36,24 +36,26 @@ const FillingStatusContainer = styled.div<{
   padding: 10px;
 
   .status-done-text {
-    color: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+    color: ${(props) =>
+      props.isDone ? globalColors.lightBlueMain : globalColors.gray};
   }
 
   .status-done-icon {
     circle,
     path {
-      stroke: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+      stroke: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.gray};
     }
   }
 
   .status-interrupted-text {
-    color: ${(props) => props.isInterrupted && "#F2675A"};
+    color: ${(props) => props.isInterrupted && globalColors.mainRed};
   }
 
   .status-interrupted-icon {
     circle,
     path {
-      stroke: ${(props) => props.isInterrupted && "#F2675A"};
+      stroke: ${(props) => props.isInterrupted && globalColors.mainRed};
     }
   }
 
@@ -82,9 +84,10 @@ const AccordionItem = styled.div<{
 
     .user-avatar {
       padding: 1px;
-      border: 2px solid #a3a9ae;
+      border: 2px solid ${globalColors.gray};
       border-color: ${(props) =>
-        (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+        (props.isDone && globalColors.lightBlueMain) ||
+        (props.isInterrupted && globalColors.mainRed)};
       border-radius: 50%;
     }
 
@@ -93,7 +96,8 @@ const AccordionItem = styled.div<{
     }
 
     .accordion-role {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .arrow-icon {
@@ -104,7 +108,8 @@ const AccordionItem = styled.div<{
       transform: ${(props) =>
         props.isOpen ? "rotate(270deg)" : "rotate(90deg)"};
       path {
-        fill: ${(props) => (props.isOpen ? "#4781d1" : "#A3A9AE")};
+        fill: ${(props) =>
+          props.isOpen ? globalColors.lightBlueMain : globalColors.gray};
       }
     }
   }
@@ -126,25 +131,29 @@ const AccordionItem = styled.div<{
     border-inline-start: ${(props) => {
       const borderValue = `2px ${
         props.isDone || props.isInterrupted ? "solid" : "dashed"
-      } #A3A9AE;`;
+      } ${globalColors.gray};`;
 
       return borderValue;
     }};
     border-color: ${(props) =>
-      (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+      (props.isDone && globalColors.lightBlueMain) ||
+      (props.isInterrupted && globalColors.mainRed)};
 
     .status-text {
       margin-inline-start: 15px;
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .status-date {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
     }
 
     .filled-status-text {
       margin-inline-start: 15px;
-      color: ${(props) => (props.isDone ? "#4781D1" : "#657077")};
+      color: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.lightGrayDark};
     }
   }
 `;
diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts
index 85a9a1fac5..950b2e49a4 100644
--- a/packages/shared/components/filter/Filter.styled.ts
+++ b/packages/shared/components/filter/Filter.styled.ts
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
 
 import { tablet, mobile } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { TViewAs } from "../../types";
 
 import { SearchInput } from "../search-input";
@@ -133,7 +133,7 @@ const StyledButton = styled.div<{ isOpen: boolean }>`
       }
     `}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledButton.defaultProps = { theme: Base };
diff --git a/packages/shared/components/grid/grid.stories.tsx b/packages/shared/components/grid/grid.stories.tsx
index 0c50dfff19..da72497ca3 100644
--- a/packages/shared/components/grid/grid.stories.tsx
+++ b/packages/shared/components/grid/grid.stories.tsx
@@ -32,6 +32,7 @@ import { Text } from "../text";
 
 import { Grid } from "./grid";
 import { GridProps } from "./Grid.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Grid",
@@ -65,162 +66,22 @@ const boxProps = {
 const Template = (args: GridProps) => {
   return (
     <Grid {...args} {...gridProps}>
-      <Box {...boxProps} backgroundProp="#F4991A">
-        <Text color="#000">200px</Text>
+      <Box {...boxProps} backgroundProp={globalColors.secondOrange}>
+        <Text color={globalColors.darkBlack}>200px</Text>
       </Box>
-      <Box {...boxProps} backgroundProp="#F2EAD3">
-        <Text color="#000">minmax(100px,1fr)</Text>
+      <Box {...boxProps} backgroundProp={globalColors.lightToastAlert}>
+        <Text color={globalColors.darkBlack}>minmax(100px,1fr)</Text>
       </Box>
-      <Box {...boxProps} backgroundProp="#F9F5F0">
-        <Text color="#000">auto</Text>
+      <Box {...boxProps} backgroundProp={globalColors.grayLight}>
+        <Text color={globalColors.darkBlack}>auto</Text>
       </Box>
     </Grid>
   );
 };
 
-// const TemplateColumns = (args: GridProps) => {
-//   return (
-//     <>
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={["200px", "100px", "1fr", "auto"]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">200px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">auto</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid {...args} {...gridProps} columnsProp="25%">
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={[{ count: 3, size: "100px" }]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={{ count: 3, size: ["100px", "1fr"] }}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//       </Grid>
-//     </>
-//   );
-// };
-
-// const TemplateRows = (args: any) => {
-//   return (
-//     <>
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         rowsProp={["100px", ["100px", "1fr"], "auto"]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">auto</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid {...args} {...gridProps} rowsProp="50px">
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//       </Grid>
-//     </>
-//   );
-// };
-
-// const TemplateLayout = (args: any) => {
-//   return (
-//     <Grid
-//       {...args}
-//       widthProp="100vw"
-//       heightProp="100vh"
-//       gridGap="10px"
-//       rowsProp={["auto", "1fr", "auto"]}
-//       columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
-//       areasProp={[
-//         { name: "header", start: [0, 0], end: [2, 0] },
-//         { name: "navbar", start: [0, 1], end: [0, 1] },
-//         { name: "main", start: [1, 1], end: [1, 1] },
-//         { name: "sidebar", start: [2, 1], end: [2, 1] },
-//         { name: "footer", start: [0, 2], end: [2, 2] },
-//       ]}
-//     >
-//       <Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
-//         <Text color="#000">header</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
-//         <Text color="#000">navbar</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
-//         <Text color="#000">main</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
-//         <Text color="#000">sidebar</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
-//         <Text color="#000">footer</Text>
-//       </Box>
-//     </Grid>
-//   );
-// };
-
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     columnsProp: ["200px", "100px", "1fr", "auto"],
   },
 };
-
-// export const Columns = TemplateColumns.bind({});
-// export const Rows = TemplateRows.bind({});
-// export const Layout = TemplateLayout.bind({});
diff --git a/packages/shared/components/headline/Headline.stories.tsx b/packages/shared/components/headline/Headline.stories.tsx
index 8648ff1218..7ed2f68f26 100644
--- a/packages/shared/components/headline/Headline.stories.tsx
+++ b/packages/shared/components/headline/Headline.stories.tsx
@@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import Headline from "./Headline";
 import type { HeadlineProps } from "./Headline.types";
+import { globalColors } from "../../themes";
 
 type HeadlineType = FC<HeadlineProps>;
 
@@ -41,7 +42,7 @@ export default meta;
 
 export const Default: StoryObj<HeadlineType> = {
   args: {
-    color: "#333",
+    color: globalColors.black,
     type: "content",
     children: "Sample text heading",
   },
diff --git a/packages/shared/components/help-button/HelpButton.styled.ts b/packages/shared/components/help-button/HelpButton.styled.ts
index f3b2959d6e..2e42008b54 100644
--- a/packages/shared/components/help-button/HelpButton.styled.ts
+++ b/packages/shared/components/help-button/HelpButton.styled.ts
@@ -43,17 +43,10 @@ const Content = styled.div`
 `;
 Content.defaultProps = { theme: Base };
 
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: ${(props) => props.theme.helpButton.borderBottom};
-`;
-HeaderContent.defaultProps = { theme: Base };
-
 const Body = styled.div`
   position: relative;
   padding: ${(props) => props.theme.helpButton.bodyPadding};
 `;
 Body.defaultProps = { theme: Base };
 
-export { Content, HeaderContent, Body };
+export { Content, Body };
diff --git a/packages/shared/components/icon-button/IconButton.styled.ts b/packages/shared/components/icon-button/IconButton.styled.ts
index 5139d669a9..1ab9584624 100644
--- a/packages/shared/components/icon-button/IconButton.styled.ts
+++ b/packages/shared/components/icon-button/IconButton.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { IconButtonProps } from "./IconButton.types";
 
 const StyledOuter = styled.div<IconButtonProps>`
@@ -34,7 +34,7 @@ const StyledOuter = styled.div<IconButtonProps>`
   cursor: ${(props) =>
     props.isDisabled || !props.isClickable ? "default" : "pointer"};
   line-height: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.isStroke &&
diff --git a/packages/shared/components/image-editor/AvatarPreview/index.tsx b/packages/shared/components/image-editor/AvatarPreview/index.tsx
index ef075530b6..43f9ef6952 100644
--- a/packages/shared/components/image-editor/AvatarPreview/index.tsx
+++ b/packages/shared/components/image-editor/AvatarPreview/index.tsx
@@ -31,6 +31,7 @@ import { Avatar, AvatarRole, AvatarSize } from "../../avatar";
 import { Text } from "../../text";
 
 import { mobile } from "../../../utils";
+import { globalColors } from "../../../themes";
 
 const StyledWrapper = styled.div`
   width: 100%;
@@ -54,7 +55,7 @@ const StyledWrapper = styled.div`
     gap: 8px;
     align-items: center;
     padding: 8px;
-    border: 1px solid #eceef1;
+    border: 1px solid ${globalColors.grayLightMid};
     border-radius: 6px;
   }
 `;
diff --git a/packages/shared/components/info-badge/InfoBadge.tsx b/packages/shared/components/info-badge/InfoBadge.tsx
index 5cc9650135..0b9ad57bd0 100644
--- a/packages/shared/components/info-badge/InfoBadge.tsx
+++ b/packages/shared/components/info-badge/InfoBadge.tsx
@@ -40,6 +40,7 @@ import {
   StyledToolTip,
 } from "./InfoBadge.styled";
 import type InfoBadgeProps from "./InfoBadge.types";
+import { globalColors } from "../../themes";
 
 export const InfoBadge: FC<InfoBadgeProps> = ({
   label,
@@ -65,7 +66,7 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
         borderRadius="50px"
         label={label}
         data-tooltip-id={id}
-        backgroundColor="#533ED1"
+        backgroundColor={globalColors.mainPurple}
       />
 
       <StyledToolTip
diff --git a/packages/shared/components/input-block/InputBlock.styled.tsx b/packages/shared/components/input-block/InputBlock.styled.tsx
index 0e87fa9639..bca1a6d540 100644
--- a/packages/shared/components/input-block/InputBlock.styled.tsx
+++ b/packages/shared/components/input-block/InputBlock.styled.tsx
@@ -28,7 +28,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { commonInputStyles } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledIconBlock = styled.div<{
   isDisabled?: boolean;
@@ -42,7 +42,7 @@ const StyledIconBlock = styled.div<{
   height: ${(props) => props.theme.inputBlock.height};
   padding-inline-end: ${(props) => props.theme.inputBlock.paddingRight};
   padding-inline-start: ${(props) => props.theme.inputBlock.paddingLeft};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 StyledIconBlock.defaultProps = { theme: Base };
 
@@ -81,7 +81,7 @@ const StyledInputGroup = styled(CustomInputGroup)`
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
     -webkit-background-clip: text;
-    -webkit-text-fill-color: #ffffff;
+    -webkit-text-fill-color: ${globalColors.white};
     transition: background-color 5000s ease-in-out 0s;
     box-shadow: inset 0 0 20px 20px #23232329;
   }
diff --git a/packages/shared/components/input-phone/index.tsx b/packages/shared/components/input-phone/index.tsx
index 23f0e6bffd..4327f7d355 100644
--- a/packages/shared/components/input-phone/index.tsx
+++ b/packages/shared/components/input-phone/index.tsx
@@ -267,7 +267,6 @@
 //         // @ts-expect-error TS(2322): Type '{ children: any; className: string; color: s... Remove this comment to see the full error message
 //         <Text
 //           className="phone-input_error-text"
-//           color="#f21c0e"
 //           fontSize="11px"
 //           lineHeight="14px"
 //         >
diff --git a/packages/shared/components/label/Label.tsx b/packages/shared/components/label/Label.tsx
index 11406523c9..fff2028229 100644
--- a/packages/shared/components/label/Label.tsx
+++ b/packages/shared/components/label/Label.tsx
@@ -29,6 +29,7 @@ import React from "react";
 import { Text } from "../text";
 
 import { LabelProps } from "./Label.types";
+import { globalColors } from "../../themes";
 
 const Label = (props: LabelProps) => {
   const {
@@ -45,7 +46,7 @@ const Label = (props: LabelProps) => {
     style,
     children,
   } = props;
-  const errorProp = error ? { color: "#c30" } : {};
+  const errorProp = error ? { color: globalColors.lightErrorStatus } : {};
 
   return (
     <Text
@@ -62,7 +63,10 @@ const Label = (props: LabelProps) => {
       className={className}
       data-testid="label"
     >
-      {text} {isRequired && <span style={{ color: "#c30" }}> *</span>}{" "}
+      {text}{" "}
+      {isRequired && (
+        <span style={{ color: globalColors.lightErrorStatus }}> *</span>
+      )}{" "}
       {children}
     </Text>
   );
diff --git a/packages/shared/components/language-combobox/LanguageCombobox.styled.ts b/packages/shared/components/language-combobox/LanguageCombobox.styled.ts
index 5e69e29c8b..d758b6fcd0 100644
--- a/packages/shared/components/language-combobox/LanguageCombobox.styled.ts
+++ b/packages/shared/components/language-combobox/LanguageCombobox.styled.ts
@@ -44,7 +44,7 @@ export const StyledComboBox = styled(ComboBox)<{ withBorder: boolean }>`
       `};
 
     :hover {
-      border-color: rgb(163, 169, 174);
+      border-color: ${(props) => props.theme.comboBox.button.hoverBorderColor};
     }
   }
 
diff --git a/packages/shared/components/link-with-dropdown/LinkWithDropdown.test.tsx b/packages/shared/components/link-with-dropdown/LinkWithDropdown.test.tsx
index 68bf07fd70..d5d5b27ba7 100644
--- a/packages/shared/components/link-with-dropdown/LinkWithDropdown.test.tsx
+++ b/packages/shared/components/link-with-dropdown/LinkWithDropdown.test.tsx
@@ -54,7 +54,7 @@
 describe("<LinkWithDropdown />", () => {
   it("renders without error", () => {
     // const wrapper = mount(
-    //   <LinkWithDropdown color="#333333" isBold={true} data={[]}>
+    //   <LinkWithDropdown isBold={true} data={[]}>
     //     Link with dropdown
     //   </LinkWithDropdown>
     // );
@@ -66,7 +66,7 @@ describe("<LinkWithDropdown />", () => {
   // it("re-render test", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={data}>
+  //     <LinkWithDropdown isBold={true} data={data}>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -87,7 +87,7 @@ describe("<LinkWithDropdown />", () => {
   // it("re-render after changing color", () => {
   //   const wrapper = shallow(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={data}>
+  //     <LinkWithDropdown isBold={true} data={data}>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -95,7 +95,7 @@ describe("<LinkWithDropdown />", () => {
 
   //   const shouldUpdate = instance.shouldComponentUpdate(
   //     {
-  //       color: "#999",
+  //       color: "",
   //     },
   //     instance.state
   //   );
@@ -108,7 +108,7 @@ describe("<LinkWithDropdown />", () => {
   // it("re-render after changing dropdownType and isOpen prop", () => {
   //   const wrapper = shallow(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={data}>
+  //     <LinkWithDropdown isBold={true} data={data}>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -130,7 +130,7 @@ describe("<LinkWithDropdown />", () => {
   // it("re-render after changing isOpen prop", () => {
   //   const wrapper = shallow(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={data}>
+  //     <LinkWithDropdown isBold={true} data={data}>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -151,7 +151,7 @@ describe("<LinkWithDropdown />", () => {
   // it("not re-render", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={data}>
+  //     <LinkWithDropdown isBold={true} data={data}>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -170,7 +170,7 @@ describe("<LinkWithDropdown />", () => {
   // it("accepts id", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={[]} id="testId">
+  //     <LinkWithDropdown isBold={true} data={[]} id="testId">
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -184,7 +184,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       className="test"
@@ -202,7 +201,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       style={{ color: "red" }}
@@ -220,7 +218,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = shallow(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       style={{ color: "red" }}
@@ -247,7 +244,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = shallow(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       style={{ color: "red" }}
@@ -271,7 +267,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       dropdownType="appearDashedAfterHover"
@@ -288,7 +283,7 @@ describe("<LinkWithDropdown />", () => {
   // it("accepts prop isOpen", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
-  //     <LinkWithDropdown color="#333333" isBold={true} data={[]} isOpen>
+  //     <LinkWithDropdown isBold={true} data={[]} isOpen>
   //       Link with dropdown
   //     </LinkWithDropdown>
   //   );
@@ -302,7 +297,6 @@ describe("<LinkWithDropdown />", () => {
   //   const wrapper = mount(
   //     // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
   //     <LinkWithDropdown
-  //       color="#333333"
   //       isBold={true}
   //       data={[]}
   //       isSemitransparent
diff --git a/packages/shared/components/link/Link.styled.tsx b/packages/shared/components/link/Link.styled.tsx
index b94bbfffd0..e5eca8ad50 100644
--- a/packages/shared/components/link/Link.styled.tsx
+++ b/packages/shared/components/link/Link.styled.tsx
@@ -28,7 +28,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { Text } from "../text";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { NoUserSelect } from "../../utils";
 import { LinkProps } from "./Link.types";
 
@@ -62,7 +62,7 @@ const StyledText = styled(PureText)`
       : NoUserSelect}
 
   cursor: ${(props) => props.theme.link.cursor};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   opacity: ${(props) => props.isSemitransparent && props.theme.link.opacity};
   line-height: ${(props) =>
     props.lineHeight ? props.lineHeight : props.theme.link.lineHeight};
diff --git a/packages/shared/components/loader/loader.stories.tsx b/packages/shared/components/loader/loader.stories.tsx
index 934fc34d10..81de069384 100644
--- a/packages/shared/components/loader/loader.stories.tsx
+++ b/packages/shared/components/loader/loader.stories.tsx
@@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { Loader } from ".";
 import { LoaderTypes } from "./Loader.enums";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Loader",
@@ -61,7 +62,7 @@ export const Default: Story = {
   ),
   args: {
     type: LoaderTypes.base,
-    color: "#63686a",
+    color: globalColors.loaderLight,
     size: "18px",
     label: "Loading content, please wait...",
   },
@@ -79,19 +80,19 @@ export const Examples = {
       >
         <Loader
           type={LoaderTypes.base}
-          color="#63686a"
+          color={globalColors.loaderLight}
           size="18px"
           label="Loading content, please wait..."
         />
         <Loader
           type={LoaderTypes.dualRing}
-          color="#63686a"
+          color={globalColors.loaderLight}
           size="40px"
           label="Loading content, please wait."
         />
         <Loader
           type={LoaderTypes.oval}
-          color="#63686a"
+          color={globalColors.loaderLight}
           size="40px"
           label="Loading content, please wait."
         />
diff --git a/packages/shared/components/loader/sub-components/Rombs.tsx b/packages/shared/components/loader/sub-components/Rombs.tsx
index 51ece50fd4..1cd2cfef87 100644
--- a/packages/shared/components/loader/sub-components/Rombs.tsx
+++ b/packages/shared/components/loader/sub-components/Rombs.tsx
@@ -27,6 +27,7 @@
 import React from "react";
 
 import styled, { keyframes } from "styled-components";
+import { globalColors } from "../../../themes";
 
 export const keyFrameBlue = (props: {
   colorStep_1: string;
@@ -34,14 +35,14 @@ export const keyFrameBlue = (props: {
   colorStep_3: string;
   colorStep_4: string;
 }) => keyframes`
-    0%   { background: #de7a59;               top: 120px; }
+    0%   { background: ${globalColors.redRomb};               top: 120px; }
     10%  { background: ${props.colorStep_1};  top: 120px; }
     14%  { background: ${props.colorStep_2};  top: 120px; }
     15%  { background: ${props.colorStep_2};  top: 0;     }
     20%  { background: ${props.colorStep_3};              }
     30%  { background: ${props.colorStep_4};              }
     40%  { top: 120px;                                    }
-    100% { background: #de7a59;               top: 120px; }
+    100% { background: ${globalColors.redRomb};               top: 120px; }
 `;
 
 export const keyFrameRed = (props: {
@@ -49,13 +50,13 @@ export const keyFrameRed = (props: {
   colorStep_2: string;
   colorStep_3: string;
 }) => keyframes`
-    0%   { background: #55bce6;               top: 100px; opacity: 1; }
+    0%   { background: ${globalColors.blueRomb};               top: 100px; opacity: 1; }
     10%  { background: ${props.colorStep_1};  top: 100px; opacity: 1; }
     14%  { background: ${props.colorStep_2};  top: 100px; opacity: 1; }
     15%  { background: ${props.colorStep_2};  top: 0;     opacity: 1; }
     20%  { background: ${props.colorStep_2};  top: 0;     opacity: 0; }
     45%  { background: ${props.colorStep_3};  top: 0;                 }
-    100% { background: #55bce6;               top: 100px;             }
+    100% { background: ${globalColors.blueRomb};               top: 100px;             }
 `;
 
 export const keyFrameGreen = (props: {
@@ -64,7 +65,7 @@ export const keyFrameGreen = (props: {
   colorStep_3: string;
   colorStep_4: string;
 }) => keyframes`
-    0%   { background: #a1cb5c;               top: 110px; opacity: 1; }
+    0%   { background: ${globalColors.greenRomb};               top: 110px; opacity: 1; }
     10%  { background: ${props.colorStep_1};  top: 110px; opacity: 1; }
     14%  { background: ${props.colorStep_2};  top: 110px; opacity: 1; }
     15%  { background: ${props.colorStep_2};  top: 0;     opacity: 1; }
@@ -72,7 +73,7 @@ export const keyFrameGreen = (props: {
     25%  { background: ${props.colorStep_3};  top: 0;     opacity: 1; }
     30%  { background: ${props.colorStep_4};                          }
     70%  { top: 110px;                                                }
-    100% { background: #a1cb5c;               top: 110px;             }
+    100% { background: ${globalColors.greenRomb};               top: 110px;             }
 `;
 
 const Romb = styled.div<{ size: string }>`
@@ -92,9 +93,9 @@ const Romb = styled.div<{ size: string }>`
   position: absolute;
 
   background: ${(props) =>
-    (props.color === "blue" && "#55bce6") ||
-    (props.color === "red" && "#de7a59") ||
-    (props.color === "green" && "#a1cb5c")};
+    (props.color === "blue" && globalColors.blueRomb) ||
+    (props.color === "red" && globalColors.redRomb) ||
+    (props.color === "green" && globalColors.greenRomb)};
 
   z-index: ${(props) =>
     (props.color === "blue" && "1") ||
diff --git a/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts b/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts
index b4697bfd5a..b1615ddaf8 100644
--- a/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts
+++ b/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts
@@ -29,7 +29,7 @@ import { isMobile } from "react-device-detect";
 
 import { mobile, tablet } from "../../utils";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { DropDown } from "../drop-down";
 import { DropDownItem } from "../drop-down-item";
 import { FloatingButton } from "../floating-button";
@@ -39,7 +39,7 @@ const StyledFloatingButton = styled(FloatingButton)`
   position: relative;
   z-index: 1010;
   background: ${(props) => props.theme.mainButtonMobile.buttonColor};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .circle__background {
     background: ${(props) => props.theme.mainButtonMobile.buttonColor};
@@ -378,15 +378,12 @@ export {
 const getDefaultProgressStyles = ({
   $currentColorScheme,
   theme,
-  error,
 }: ProgressBarMobileDefaultStyles) =>
   $currentColorScheme &&
   css`
-    background: ${error
-      ? theme.mainButtonMobile.bar.errorBackground
-      : theme.isBase
-        ? $currentColorScheme?.main?.accent
-        : "#FFFFFF"};
+    background: ${
+      theme.isBase ? $currentColorScheme?.main?.accent : globalColors.white
+    }};
   `;
 
 const StyledProgressBarTheme = styled(StyledBar)(getDefaultProgressStyles);
diff --git a/packages/shared/components/main-button-mobile/sub-components/ProgressBar.tsx b/packages/shared/components/main-button-mobile/sub-components/ProgressBar.tsx
index ed743b45bc..44c4c1ddec 100644
--- a/packages/shared/components/main-button-mobile/sub-components/ProgressBar.tsx
+++ b/packages/shared/components/main-button-mobile/sub-components/ProgressBar.tsx
@@ -65,7 +65,6 @@ const ProgressBarMobile = ({
         <Text
           className="progress-header"
           fontSize="14px"
-          // color="#657077"
           onClick={onClickHeaderAction}
           truncate
         >
diff --git a/packages/shared/components/main-button/MainButton.styled.ts b/packages/shared/components/main-button/MainButton.styled.ts
index 529e51dac8..4510b60f3e 100644
--- a/packages/shared/components/main-button/MainButton.styled.ts
+++ b/packages/shared/components/main-button/MainButton.styled.ts
@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { NoUserSelect } from "../../utils";
-import { TColorScheme, TTheme, Base } from "../../themes";
+import { TColorScheme, TTheme, Base, globalColors } from "../../themes";
 
 const hoveredCss = css`
   background-color: ${(props) => props.theme.mainButton.hoverBackgroundColor};
@@ -65,7 +65,7 @@ const StyledMainButton = styled.div<{
 }>`
   ${NoUserSelect}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -108,7 +108,7 @@ const StyledMainButton = styled.div<{
     svg {
       padding-bottom: 1px;
       path {
-        fill: #fff;
+        fill: ${(props) => props.theme.mainButton.svg.fill};
       }
     }
   }
diff --git a/packages/shared/components/media-viewer/MediaViewer.styled.ts b/packages/shared/components/media-viewer/MediaViewer.styled.ts
index fbe484cfa9..3a70c07504 100644
--- a/packages/shared/components/media-viewer/MediaViewer.styled.ts
+++ b/packages/shared/components/media-viewer/MediaViewer.styled.ts
@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";
 import { DropDown } from "@docspace/shared/components/drop-down";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 
@@ -62,21 +62,21 @@ export const ControlBtn = styled.div`
 ControlBtn.defaultProps = { theme: Base };
 
 export const StyledDropDown = styled(DropDown)`
+  background: ${globalColors.black};
   direction: ${({ theme }) => theme.interfaceDirection};
-  background: #333;
 `;
 
 export const StyledDropDownItem = styled(DropDownItem)`
-  color: #fff;
+  color: ${globalColors.white};
 
   .drop-down-item_icon svg {
     path {
-      fill: #fff !important;
+      fill: ${globalColors.white} !important;
     }
   }
 
   &:hover {
-    background: #444;
+    background: ${globalColors.black};
   }
 `;
 
@@ -100,13 +100,13 @@ export const StyledMobileDetails = styled.div`
   align-items: center;
   background: linear-gradient(
     0deg,
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.8) 100%
   );
 
   svg {
     path {
-      fill: #fff;
+      fill: ${globalColors.white};
     }
   }
 
@@ -193,7 +193,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
     width: 100%;
     background: linear-gradient(
       0deg,
-      rgba(0, 0, 0, 0) 0%,
+      ${globalColors.tapHighlight} 0%,
       rgba(0, 0, 0, 0.8) 100%
     );
     position: fixed;
diff --git a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts b/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
index 124d0c9e42..133d5db056 100644
--- a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../../../themes";
 
 export const DesktopDetailsContainer = styled.div`
   direction: ${({ theme }) => theme.interfaceDirection};
@@ -33,7 +34,7 @@ export const DesktopDetailsContainer = styled.div`
   width: 100%;
   background: linear-gradient(
     0deg,
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.8) 100%
   );
 
diff --git a/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx b/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx
index 96923c68b4..b7c27c94f9 100644
--- a/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx
@@ -35,6 +35,7 @@ import { ControlBtn } from "../../MediaViewer.styled";
 
 import type { DesktopDetailsProps } from "./DesktopDetails.type";
 import { DesktopDetailsContainer } from "./DesktopDetails.styled";
+import { globalColors } from "../../../../themes";
 
 export const DesktopDetails = ({
   onMaskClick,
@@ -51,7 +52,7 @@ export const DesktopDetails = ({
       {showCloseButton && (
         <ControlBtn onClick={onMaskClick} className="mediaPlayerClose">
           <IconButton
-            color="#fff"
+            color={globalColors.white}
             iconName={ViewerMediaCloseSvgUrl}
             size={28}
             isClickable
diff --git a/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts b/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts
index f30348f5dc..6c2f652ba2 100644
--- a/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts
@@ -26,6 +26,7 @@
 
 import styled from "styled-components";
 import { animated } from "@react-spring/web";
+import { globalColors } from "../../../../themes";
 
 export const ImageViewerContainer = styled.div<{ $backgroundBlack: boolean }>`
   width: 100%;
@@ -41,7 +42,7 @@ export const ImageViewerContainer = styled.div<{ $backgroundBlack: boolean }>`
   touch-action: none;
 
   background-color: ${(props) =>
-    props.$backgroundBlack ? "#000" : "rgba(55, 55, 55, 0.6)"};
+    props.$backgroundBlack ? globalColors.darkBlack : "rgba(55, 55, 55, 0.6)"};
 `;
 
 export const ImageWrapper = styled.div<{ $isLoading: boolean }>`
diff --git a/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx b/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx
index ceac4338a3..8a4f8a11e3 100644
--- a/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx
@@ -32,6 +32,7 @@ import { isSeparator } from "@docspace/shared/utils/typeGuards";
 
 import { StyledErrorToolbar, StyledMediaError } from "./MessageError.styled";
 import type PlayerMessageErrorProps from "./MessageError.props";
+import { globalColors } from "../../../../themes";
 
 export const MessageError = ({
   model,
@@ -46,7 +47,12 @@ export const MessageError = ({
   return (
     <div>
       <StyledMediaError>
-        <Text fontSize="15px" color="#fff" textAlign="center" className="title">
+        <Text
+          fontSize="15px"
+          color={globalColors.white}
+          textAlign="center"
+          className="title"
+        >
           {errorTitle}
         </Text>
       </StyledMediaError>
diff --git a/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx b/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx
index 0885f1c964..cabdc3fa03 100644
--- a/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx
@@ -39,6 +39,7 @@ import BackArrow from "PUBLIC_DIR/images/viewer.media.back.react.svg";
 import { StyledMobileDetails } from "../../MediaViewer.styled";
 
 import type MobileDetailsProps from "./MobileDetails.props";
+import { globalColors } from "../../../../themes";
 
 const MobileDetails = memo(
   forwardRef(
@@ -69,7 +70,7 @@ const MobileDetails = memo(
           {!isPublicFile && (
             <BackArrow className="mobile-close" onClick={onMaskClick} />
           )}
-          <Text fontSize="14px" color="#fff" className="title">
+          <Text fontSize="14px" color={globalColors.white} className="title">
             {title}
           </Text>
           {!isPreviewFile && !isError && (
diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/PDFViewer.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/PDFViewer.styled.ts
index 5fc4a7cfff..f97695dac5 100644
--- a/packages/shared/components/media-viewer/sub-components/PDFViewer/PDFViewer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/PDFViewer.styled.ts
@@ -28,6 +28,7 @@ import styled, { css } from "styled-components";
 
 import { DesktopDetails } from "../DesktopDetails";
 import { ViewerToolbar } from "../ViewerToolbar";
+import { globalColors } from "../../../../themes";
 
 type Panel = { isPanelOpen?: boolean };
 
@@ -98,7 +99,7 @@ export const ErrorMessage = styled.p`
   padding: 20px 30px;
   background-color: rgba(0, 0, 0, 0.6);
   border-radius: 4px;
-  color: rgb(238, 238, 238);
+  color: ${globalColors.white};
 `;
 
 export const DesktopTopBar = styled(DesktopDetails)<Panel>`
diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts
index 0d9a6e8009..fb05576e79 100644
--- a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../../../../../themes";
 
 export const List = styled.ul`
   padding-inline-start: 16px;
@@ -38,7 +39,7 @@ export const List = styled.ul`
 `;
 
 export const Item = styled.li`
-  color: #ffffff;
+  color: ${globalColors.white};
   padding: 1px 16px 0;
   font-weight: 400;
   font-size: 13px;
@@ -50,13 +51,13 @@ export const Item = styled.li`
 
   @media (hover: hover) {
     :hover {
-      background: #474747;
+      background: ${globalColors.grayDarkStrong};
     }
   }
 `;
 
 export const Text = styled.p`
   margin: 0;
-  border-bottom: 1px solid #474747;
+  border-bottom: 1px solid ${globalColors.grayDarkStrong};
   padding: 6px 0;
 `;
diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts
index 9caf54886f..15bc46e9df 100644
--- a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts
@@ -26,6 +26,7 @@
 
 import { animated } from "@react-spring/web";
 import styled from "styled-components";
+import { globalColors } from "../../../../../../themes";
 
 export const MobileDrawerContainer = styled.section`
   position: fixed;
@@ -42,7 +43,7 @@ export const MobileDrawerWrapper = styled(animated.div)`
 
   width: 100%;
 
-  background: #333333;
+  background: ${globalColors.black};
   touch-action: none;
 
   overflow: hidden;
diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts
index 20e7da0aa7..8de0989aaf 100644
--- a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts
@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
+import { globalColors } from "../../../../../../themes";
 
 export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
   display: flex;
@@ -34,7 +35,7 @@ export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
   height: 100vh;
   width: 100%;
 
-  background: #333333;
+  background: ${globalColors.black};
 
   max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
   visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
diff --git a/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
index 28450823e1..216f8145a0 100644
--- a/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../../../themes";
 
 export const PlayerDesktopContextMenuWrapper = styled.div`
   position: relative;
@@ -45,11 +46,11 @@ export const PlayerDesktopContextMenuWrapper = styled.div`
     height: 20px;
 
     path {
-      fill: #fff;
+      fill: ${globalColors.white};
     }
 
     rect {
-      stroke: #fff;
+      stroke: ${globalColors.white};
     }
   }
 `;
@@ -66,7 +67,7 @@ export const DownloadIconWrapper = styled.div`
 
   svg {
     path {
-      fill: #fff;
+      fill: ${globalColors.white};
     }
   }
 `;
diff --git a/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx b/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
index c46e9207df..80e8b48328 100644
--- a/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
+++ b/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
@@ -29,10 +29,11 @@ import styled from "styled-components";
 
 import { mobile } from "@docspace/shared/utils";
 import { formatTime } from "../../MediaViewer.utils";
+import { globalColors } from "../../../../themes";
 
 const PlayerDurationWrapper = styled.div`
   width: 102px;
-  color: #fff;
+  color: ${globalColors.white};
   user-select: none;
   font-size: 12px;
   font-weight: 700;
diff --git a/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts
index 9f23a54bf6..33dfc16dff 100644
--- a/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../../../themes";
 
 export const SpeedControlWrapper = styled.div`
   position: relative;
@@ -41,12 +42,12 @@ export const SpeedControlWrapper = styled.div`
 
   svg {
     path {
-      fill: #fff;
+      fill: ${globalColors.white};
     }
   }
 
   rect {
-    stroke: #fff;
+    stroke: ${globalColors.white};
   }
 `;
 
@@ -64,8 +65,8 @@ export const DropDown = styled.div`
   bottom: 48px;
   z-index: 50;
 
-  color: #fff;
-  background: #333;
+  color: ${globalColors.white};
+  background: ${globalColors.black};
   text-align: center;
   border-radius: 7px 7px 0px 0px;
 `;
@@ -78,7 +79,7 @@ export const DropDownItem = styled.div`
   width: 48px;
   &:hover {
     cursor: pointer;
-    background: #222;
+    background: ${globalColors.black};
   }
 `;
 
@@ -106,11 +107,11 @@ export const ToastSpeed = styled.div`
     width: 46px;
     height: 46px;
     path {
-      fill: #fff;
+      fill: ${globalColors.white};
     }
   }
 
   rect {
-    stroke: #fff;
+    stroke: ${globalColors.white};
   }
 `;
diff --git a/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
index d8f6a6a872..e2f304cf69 100644
--- a/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
@@ -28,6 +28,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
 import { tablet, desktop } from "@docspace/shared/utils";
+import { globalColors } from "../../../../themes";
 
 export const HoverProgress = styled.div`
   display: none;
@@ -59,7 +60,7 @@ const mobileCss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -72,7 +73,7 @@ const mobileCss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -86,7 +87,7 @@ const mobileCss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -114,7 +115,7 @@ export const PlayerTimelineWrapper = styled.div`
     left: 50%;
     top: -25px;
     font-size: 13px;
-    color: #fff;
+    color: ${globalColors.white};
     pointer-events: none;
     transform: translateX(-50%);
   }
@@ -151,7 +152,10 @@ export const PlayerTimelineWrapper = styled.div`
     border-radius: 5px;
 
     background: rgba(255, 255, 255, 0.3);
-    background-image: linear-gradient(#fff, #fff);
+    background-image: linear-gradient(
+      ${globalColors.white},
+      ${globalColors.white}
+    );
     background-repeat: no-repeat;
 
     z-index: 1;
@@ -169,7 +173,7 @@ export const PlayerTimelineWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
 
     transition:
       opacity 0.3s ease 0s,
@@ -182,7 +186,7 @@ export const PlayerTimelineWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
     transition:
       opacity 0.3s ease 0s,
       visibility 0.3s ease 0s;
@@ -194,7 +198,7 @@ export const PlayerTimelineWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
     transition:
       opacity 0.3s ease 0s,
       visibility 0.3s ease 0s;
diff --git a/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
index 03d6fcf6fe..940e7389fe 100644
--- a/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
@@ -27,6 +27,7 @@
 import styled, { css } from "styled-components";
 
 import { tablet } from "@docspace/shared/utils";
+import { globalColors } from "../../../../themes";
 
 export const PlayerVolumeControlWrapper = styled.div`
   display: flex;
@@ -47,7 +48,7 @@ const mobilecss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -60,7 +61,7 @@ const mobilecss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -73,7 +74,7 @@ const mobilecss = css`
     -webkit-appearance: none;
     visibility: visible;
     opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
     height: 10px;
     width: 10px;
     border-radius: 50%;
@@ -100,7 +101,10 @@ export const VolumeWrapper = styled.div`
     border-radius: 5px;
 
     background: rgba(255, 255, 255, 0.3);
-    background-image: linear-gradient(#fff, #fff);
+    background-image: linear-gradient(
+      ${globalColors.white},
+      ${globalColors.white}
+    );
     background-repeat: no-repeat;
 
     &:hover {
@@ -118,7 +122,7 @@ export const VolumeWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
   }
 
   input[type="range"]::-moz-range-thumb {
@@ -127,7 +131,7 @@ export const VolumeWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
   }
 
   input[type="range"]::-ms-fill-upper {
@@ -136,7 +140,7 @@ export const VolumeWrapper = styled.div`
     -webkit-appearance: none;
     visibility: hidden;
     opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
   }
 
   &:hover {
diff --git a/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts
index dfa2368a72..a1800961ba 100644
--- a/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts
@@ -26,6 +26,7 @@
 
 import styled from "styled-components";
 import { ViewerLoaderProps } from "./ViewerLoader.types";
+import { globalColors } from "../../../../themes";
 
 export const StyledLoaderWrapper = styled.div<
   Pick<ViewerLoaderProps, "withBackground">
@@ -45,7 +46,7 @@ export const StyledLoaderWrapper = styled.div<
 export const StyledLoader = styled.div`
   width: 48px;
   height: 48px;
-  border: 4px solid #fff;
+  border: 4px solid ${globalColors.white};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
diff --git a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
index 363c15843f..972d33cd84 100644
--- a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
@@ -28,13 +28,14 @@ import styled from "styled-components";
 import { animated } from "@react-spring/web";
 
 import { tablet, mobile } from "@docspace/shared/utils";
+import { globalColors } from "../../../../themes";
 
 export const ContainerPlayer = styled.div<{ $isFullScreen: boolean }>`
   position: fixed;
   inset: 0;
   z-index: 305;
   background-color: ${(props) =>
-    props.$isFullScreen ? "#000" : "rgba(55, 55, 55, 0.6)"};
+    props.$isFullScreen ? globalColors.darkBlack : "rgba(55, 55, 55, 0.6)"};
   touch-action: none;
 `;
 
@@ -71,7 +72,7 @@ export const StyledPlayerControls = styled.div<{ $isShow: boolean }>`
   opacity: ${(props) => (props.$isShow ? "1" : "0")};
 
   background: linear-gradient(
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.64) 48.44%,
     rgba(0, 0, 0, 0.89) 100%
   );
diff --git a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
index d085587b4f..4e3afaf991 100644
--- a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../../../themes";
 
 export const ImageViewerToolbarWrapper = styled.div`
   height: 48px;
@@ -81,7 +82,10 @@ export const ToolbarItem = styled.li<{
     height: 16px;
     path,
     rect {
-      ${(props) => (props.$percent !== 25 ? "fill: #fff;" : "fill: #BEBEBE;")}
+      ${(props) =>
+        props.$percent !== 25
+          ? `fill: ${globalColors.white};`
+          : `fill: ${globalColors.gray};`}
     }
   }
 
diff --git a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx
index 5593aff92b..77f5273fde 100644
--- a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx
@@ -45,6 +45,7 @@ import {
   ListTools,
   ToolbarItem,
 } from "./ViewerToolbar.styled";
+import { globalColors } from "../../../../themes";
 
 const ViewerToolbar = forwardRef<ImperativeHandle, ImageViewerToolbarProps>(
   (
@@ -106,7 +107,11 @@ const ViewerToolbar = forwardRef<ImperativeHandle, ImageViewerToolbarProps>(
       return (
         <div
           className="iconContainer zoomPercent"
-          style={{ width: "auto", color: "#fff", userSelect: "none" }}
+          style={{
+            width: "auto",
+            color: globalColors.white,
+            userSelect: "none",
+          }}
         >
           {`${percent}%`}
         </div>
diff --git a/packages/shared/components/modal-dialog/ModalDialog.stories.tsx b/packages/shared/components/modal-dialog/ModalDialog.stories.tsx
index a91703d9f5..7e66abf06b 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.stories.tsx
+++ b/packages/shared/components/modal-dialog/ModalDialog.stories.tsx
@@ -32,6 +32,7 @@ import { Button, ButtonSize } from "../button";
 import { ModalDialog } from "./ModalDialog";
 import { ModalDialogType } from "./ModalDialog.enums";
 import { ModalDialogProps } from "./ModalDialog.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ModalDialog",
@@ -68,7 +69,10 @@ const Template = ({ ...args }: ModalDialogProps) => {
         <ModalDialog.Body>
           <span>
             Send the password change instruction to the{" "}
-            <a style={{ color: "#5299E0" }} href="mailto:asc@story.book">
+            <a
+              style={{ color: globalColors.lightSecondMain }}
+              href="mailto:asc@story.book"
+            >
               asc@story.book
             </a>{" "}
             email address
diff --git a/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts b/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
index 99cd65860d..cd54bcc459 100644
--- a/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
+++ b/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
@@ -28,6 +28,7 @@ import styled from "styled-components";
 
 import { mobile } from "@docspace/shared/utils";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+import { globalColors } from "../../themes";
 
 export const ProviderRow = styled.div`
   width: 100%;
@@ -46,7 +47,7 @@ export const ProviderRow = styled.div`
     padding-inline-start: 4px;
 
     path {
-      fill: ${(props) => !props.theme.isBase && "#fff"};
+      fill: ${(props) => !props.theme.isBase && globalColors.white};
     }
   }
 
diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts
index 552d07339a..9015bffbc9 100644
--- a/packages/shared/components/navigation/Navigation.styled.ts
+++ b/packages/shared/components/navigation/Navigation.styled.ts
@@ -30,7 +30,7 @@ import ExpanderDownIcon from "PUBLIC_DIR/images/expander-down.react.svg";
 import ArrowIcon from "PUBLIC_DIR/images/arrow.react.svg";
 
 import { tablet, mobile, commonIconsStyles } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 import { ColorTheme } from "../color-theme";
 import { Heading } from "../heading";
@@ -89,7 +89,7 @@ const StyledContainer = styled.div<{
     .header_separator {
       display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")};
 
-      border-inline-start: 1px solid #dfe2e3;
+      border-inline-start: 1px solid ${globalColors.lightGraySelected};
       margin-block: 0;
       margin-inline: 15px 0;
 
diff --git a/packages/shared/components/password-input/PasswordInput.styled.tsx b/packages/shared/components/password-input/PasswordInput.styled.tsx
index e260cec385..88e2740665 100644
--- a/packages/shared/components/password-input/PasswordInput.styled.tsx
+++ b/packages/shared/components/password-input/PasswordInput.styled.tsx
@@ -27,7 +27,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { tablet, mobile } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 import { Text } from "../text";
 
@@ -186,7 +186,10 @@ StyledTooltipContainer.defaultProps = { theme: Base };
 
 const StyledTooltipItem = styled(Text)<{ valid?: boolean }>`
   //height: 24px;
-  color: ${(props) => (props.valid ? "#44bb00" : "#B40404")} !important;
+  color: ${(props) =>
+    props.valid
+      ? globalColors.lightStatusPositive
+      : globalColors.lightErrorStatus} !important;
 `;
 
 export {
diff --git a/packages/shared/components/password-input/PasswordInput.tsx b/packages/shared/components/password-input/PasswordInput.tsx
index f2b040dee8..a83ecd6f96 100644
--- a/packages/shared/components/password-input/PasswordInput.tsx
+++ b/packages/shared/components/password-input/PasswordInput.tsx
@@ -58,6 +58,7 @@ import {
   TPasswordSettings,
   TPasswordValidation,
 } from "./PasswordInput.types";
+import { globalColors } from "../../themes";
 
 const PasswordInput = React.forwardRef(
   (
@@ -418,7 +419,7 @@ const PasswordInput = React.forwardRef(
           <Text
             className="text-tooltip"
             fontSize="10px"
-            color="#A3A9AE"
+            color={globalColors.gray}
             as="span"
           >
             {settings?.minLength ? length : null}{" "}
diff --git a/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts b/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts
index c212415784..6bd930d027 100644
--- a/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts
+++ b/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts
@@ -26,12 +26,12 @@
 
 import styled from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledPublicRoomBar = styled.div`
   display: flex;
   background-color: ${(props) => props.theme.infoBlock.background};
-  color: #333;
+  color: ${globalColors.black};
   font-size: 12px;
   padding: 12px 16px;
   border-radius: 6px;
diff --git a/packages/shared/components/report-dialog/index.tsx b/packages/shared/components/report-dialog/index.tsx
index cb9f8709ab..05ed408227 100644
--- a/packages/shared/components/report-dialog/index.tsx
+++ b/packages/shared/components/report-dialog/index.tsx
@@ -46,6 +46,7 @@ import { ModalDialogType, ModalDialog } from "../modal-dialog";
 
 import { ModalDialogContainer } from "./ReportDialog.styled";
 import type { ReportDialogProps } from "./ReportDialog.types";
+import { globalColors } from "../../themes";
 
 const ReportDialog = (props: ReportDialogProps) => {
   const { t, ready } = useTranslation(["Common"]);
@@ -123,7 +124,7 @@ const ReportDialog = (props: ReportDialogProps) => {
           <img src={FileReactSvgUrl} className="file-icon" alt="" />
           <Text as="div" fontWeight={600} noSelect className="report-filename">
             {fileTitle}
-            <Text fontWeight={600} noSelect color="#A3A9AE">
+            <Text fontWeight={600} noSelect color={globalColors.gray}>
               .json
             </Text>
           </Text>
diff --git a/packages/shared/components/room-icon/index.tsx b/packages/shared/components/room-icon/index.tsx
index 0742d26315..e61b0b0418 100644
--- a/packages/shared/components/room-icon/index.tsx
+++ b/packages/shared/components/room-icon/index.tsx
@@ -27,7 +27,7 @@
 import React from "react";
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { Text } from "../text";
 
 import { IconButton } from "../icon-button";
@@ -68,7 +68,9 @@ const StyledIcon = styled.div<{
     font-weight: 700;
     line-height: 16px;
     color: ${(props) =>
-      props.wrongImage && props.theme.isBase ? "#333333" : "#ffffff"};
+      props.wrongImage && props.theme.isBase
+        ? globalColors.black
+        : globalColors.white};
     position: relative;
     ${(props) =>
       !props.theme.isBase &&
diff --git a/packages/shared/components/row-container/RowContainer.stories.tsx b/packages/shared/components/row-container/RowContainer.stories.tsx
index 16cf403638..d2303df109 100644
--- a/packages/shared/components/row-container/RowContainer.stories.tsx
+++ b/packages/shared/components/row-container/RowContainer.stories.tsx
@@ -40,6 +40,7 @@ import { Link, LinkType } from "../link";
 import { RowContainer } from "./RowContainer";
 
 import { RowContainerProps } from "./RowContainer.types";
+import { globalColors } from "../../themes";
 
 const SendClockIcon = styled(SendClockReactSvg)`
   ${commonIconsStyles}
@@ -144,8 +145,11 @@ const Template = (args: RowContainerProps) => {
             source={user.avatar}
           />
         );
-        const nameColor = user.status === "pending" && "#A3A9AE";
-        const sideInfoColor = user.status === "pending" ? "#D0D5DA" : "#A3A9AE";
+        const nameColor = user.status === "pending" && globalColors.gray;
+        const sideInfoColor =
+          user.status === "pending"
+            ? globalColors.grayStrong
+            : globalColors.gray;
 
         return (
           <Row
@@ -169,10 +173,16 @@ const Template = (args: RowContainerProps) => {
               </Link>
               <>
                 {user.status === "pending" && (
-                  <SendClockIcon size={IconSizeType.small} color="#3B72A7" />
+                  <SendClockIcon
+                    size={IconSizeType.small}
+                    color={globalColors.lightIcons}
+                  />
                 )}
                 {user.status === "disabled" && (
-                  <CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
+                  <CatalogSpamIcon
+                    size={IconSizeType.small}
+                    color={globalColors.lightIcons}
+                  />
                 )}
               </>
               {user.isHead ? (
diff --git a/packages/shared/components/row-content/RowContent.stories.tsx b/packages/shared/components/row-content/RowContent.stories.tsx
index 750a2d9138..cd17ac71b6 100644
--- a/packages/shared/components/row-content/RowContent.stories.tsx
+++ b/packages/shared/components/row-content/RowContent.stories.tsx
@@ -36,6 +36,7 @@ import { Checkbox } from "../checkbox";
 
 import { RowContent } from "./RowContent";
 import { RowContentProps } from "./RowContent.types";
+import { globalColors } from "../../themes";
 
 export default {
   title: "Components/RowContent",
@@ -60,10 +61,21 @@ const Template = (args: RowContentProps) => {
           Demo
         </Link>
         <>
-          <SendClockIcon size={IconSizeType.small} color="#3B72A7" />
-          <CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
+          <SendClockIcon
+            size={IconSizeType.small}
+            color={globalColors.lightIcons}
+          />
+          <CatalogSpamIcon
+            size={IconSizeType.small}
+            color={globalColors.lightIcons}
+          />
         </>
-        <Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
+        <Link
+          type={LinkType.page}
+          title="Demo"
+          fontSize="12px"
+          color={globalColors.gray}
+        >
           Demo
         </Link>
         <Link
@@ -71,7 +83,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo
         </Link>
@@ -79,7 +91,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.page}
           title="0 000 0000000"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           0 000 0000000
         </Link>
@@ -88,7 +100,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.page}
           title="demo@demo.com"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           demo@demo.com
         </Link>
@@ -98,14 +110,17 @@ const Template = (args: RowContentProps) => {
           Demo Demo
         </Link>
 
-        <CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
+        <CatalogSpamIcon
+          size={IconSizeType.small}
+          color={globalColors.lightIcons}
+        />
 
         <Link
           // containerWidth="160px"
           type={LinkType.action}
           title="Demo Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo Demo
         </Link>
@@ -113,7 +128,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="0 000 0000000"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           0 000 0000000
         </Link>
@@ -122,7 +137,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="demo.demo@demo.com"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           demo.demo@demo.com
         </Link>
@@ -142,7 +157,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="Demo Demo Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo Demo Demo
         </Link>
@@ -150,7 +165,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="0 000 0000000"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           0 000 0000000
         </Link>
@@ -159,7 +174,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="demo.demo.demo@demo.com"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           demo.demo.demo@demo.com
         </Link>
@@ -174,13 +189,16 @@ const Template = (args: RowContentProps) => {
           Demo Demo Demo Demo
         </Link>
 
-        <SendClockIcon size={IconSizeType.small} color="#3B72A7" />
+        <SendClockIcon
+          size={IconSizeType.small}
+          color={globalColors.lightIcons}
+        />
 
         <Link
           type={LinkType.action}
           title="Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo
         </Link>
@@ -189,7 +207,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="Demo Demo Demo Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo Demo Demo Demo
         </Link>
@@ -197,7 +215,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="0 000 0000000"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           0 000 0000000
         </Link>
@@ -206,7 +224,7 @@ const Template = (args: RowContentProps) => {
           type={LinkType.action}
           title="demo.demo.demo.demo@demo.com"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           demo.demo.demo.demo@demo.com
         </Link>
diff --git a/packages/shared/components/row-content/RowContent.test.tsx b/packages/shared/components/row-content/RowContent.test.tsx
index 1ef12f7cb2..fb1a783315 100644
--- a/packages/shared/components/row-content/RowContent.test.tsx
+++ b/packages/shared/components/row-content/RowContent.test.tsx
@@ -31,6 +31,7 @@ import "@testing-library/jest-dom";
 import { Link, LinkType } from "../link";
 
 import { RowContent } from "./RowContent";
+import { globalColors } from "../../themes";
 
 describe("<RowContent />", () => {
   it("renders without error", () => {
@@ -41,18 +42,23 @@ describe("<RowContent />", () => {
           title="Demo"
           isBold
           fontSize="15px"
-          color="#333333"
+          color={globalColors.black}
         >
           Demo
         </Link>
-        <Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
+        <Link
+          type={LinkType.page}
+          title="Demo"
+          fontSize="12px"
+          color={globalColors.gray}
+        >
           Demo
         </Link>
         <Link
           type={LinkType.action}
           title="Demo"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           Demo
         </Link>
@@ -60,7 +66,7 @@ describe("<RowContent />", () => {
           type={LinkType.page}
           title="0 000 0000000"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           0 000 0000000
         </Link>
@@ -68,7 +74,7 @@ describe("<RowContent />", () => {
           type={LinkType.page}
           title="demo@demo.com"
           fontSize="12px"
-          color="#A3A9AE"
+          color={globalColors.gray}
         >
           demo@demo.com
         </Link>
@@ -77,76 +83,4 @@ describe("<RowContent />", () => {
 
     expect(screen.getByTestId("row-content")).toBeInTheDocument();
   });
-
-  // it("accepts id", () => {
-  //   const wrapper = mount(
-  //     <RowContent id="testId">
-  //       <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
-  //         0 000 0000000
-  //       </Link>
-  //       <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
-  //         demo@demo.com
-  //       </Link>
-  //     </RowContent>,
-  //   );
-
-  //   expect(wrapper.prop("id")).toEqual("testId");
-  // });
-
-  // it("accepts className", () => {
-  //   const wrapper = mount(
-  //     <RowContent className="test">
-  //       <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
-  //         0 000 0000000
-  //       </Link>
-  //       <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
-  //         demo@demo.com
-  //       </Link>
-  //     </RowContent>,
-  //   );
-
-  //   expect(wrapper.prop("className")).toEqual("test");
-  // });
-
-  // it("accepts style", () => {
-  //   const wrapper = mount(
-  //     <RowContent style={{ color: "red" }}>
-  //       <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
-  //         Demo
-  //       </Link>
-  //       <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
-  //         0 000 0000000
-  //       </Link>
-  //       <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
-  //         demo@demo.com
-  //       </Link>
-  //     </RowContent>,
-  //   );
-
-  //   expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
-  // });
 });
diff --git a/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts b/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
index 03dbe07ab9..22764d9feb 100644
--- a/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
+++ b/packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { mobileMore, mobile } from "../../utils";
 
 const displaySettings = css<{
@@ -39,7 +39,7 @@ const displaySettings = css<{
   align-items: flex-start;
   border-top: ${(props) =>
     props.hasScroll && !props.showReminder && !props.hideBorder
-      ? "1px solid #ECEEF1"
+      ? `1px solid ${globalColors.grayLightMid}`
       : "none"};
 
   ${(props) =>
@@ -83,7 +83,7 @@ const displaySettings = css<{
     props.hasScroll &&
     css`
       .unsaved-changes {
-        border-top: 1px solid #eceef1;
+        border-top: 1px solid ${globalColors.grayLightMid};
         width: calc(100% - 16px);
 
         inset-inline-start: 0;
diff --git a/packages/shared/components/section/Section.styled.ts b/packages/shared/components/section/Section.styled.ts
index 2d5e965c2f..e589d48c11 100644
--- a/packages/shared/components/section/Section.styled.ts
+++ b/packages/shared/components/section/Section.styled.ts
@@ -37,7 +37,7 @@ import {
   desktop,
   NoUserSelect,
 } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { TViewAs } from "../../types";
 
 import { Scrollbar } from "../scrollbar";
@@ -517,7 +517,7 @@ const StyledSectionHeader = styled.div<{ isFormGallery?: boolean }>`
 
     .header-container {
       margin-bottom: 1px;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-tap-highlight-color: ${globalColors.tapHighlight};
     }
   }
 
diff --git a/packages/shared/components/selection-area/SelectionArea.styled.ts b/packages/shared/components/selection-area/SelectionArea.styled.ts
index 9d56740123..c31cfa16ba 100644
--- a/packages/shared/components/selection-area/SelectionArea.styled.ts
+++ b/packages/shared/components/selection-area/SelectionArea.styled.ts
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled from "styled-components";
+import { globalColors } from "../../themes";
 
 const StyledSelectionArea = styled.div`
   top: 0;
@@ -36,7 +37,7 @@ const StyledSelectionArea = styled.div`
   display: none;
 
   background: rgba(68, 170, 255, 0.5);
-  border: 1px solid #4af;
+  border: 1px solid ${globalColors.lightSecondMain}
   z-index: 1000;
 `;
 
diff --git a/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts b/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts
index d7d445c549..cfe3b321b3 100644
--- a/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts
+++ b/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledButton = styled.div<{ isDisabled?: boolean; isAction?: boolean }>`
   display: inline-block;
@@ -78,7 +78,7 @@ const StyledButton = styled.div<{ isDisabled?: boolean; isAction?: boolean }>`
     }
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.isAction &&
diff --git a/packages/shared/components/selector/Selector.stories.tsx b/packages/shared/components/selector/Selector.stories.tsx
index e6b3e646fe..cde3ecd9f4 100644
--- a/packages/shared/components/selector/Selector.stories.tsx
+++ b/packages/shared/components/selector/Selector.stories.tsx
@@ -39,6 +39,7 @@ import { AvatarRole } from "../avatar";
 
 import { Selector } from "./Selector";
 import { SelectorProps, TSelectorItem } from "./Selector.types";
+import { globalColors } from "../../themes";
 
 const StyledRowLoader = styled.div`
   width: 100%;
@@ -210,7 +211,7 @@ const Template = (args: SelectorProps) => {
       style={{
         width: "480px",
         height: "485px",
-        border: "1px solid #eee",
+        border: `1px solid ${globalColors.grayLightMid}`,
         margin: "auto",
       }}
     >
diff --git a/packages/shared/components/share/Share.styled.ts b/packages/shared/components/share/Share.styled.ts
index 9f80696536..9286e090c2 100644
--- a/packages/shared/components/share/Share.styled.ts
+++ b/packages/shared/components/share/Share.styled.ts
@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { DropDown } from "../drop-down";
+import { globalColors } from "../../themes";
 
 const StyledLinks = styled.div`
   margin-top: 20px;
@@ -33,7 +34,7 @@ const StyledLinks = styled.div`
   .title-link {
     margin-bottom: 12px;
     line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
   }
 
   .additional-link {
diff --git a/packages/shared/components/share/sub-components/ExpiredComboBox.tsx b/packages/shared/components/share/sub-components/ExpiredComboBox.tsx
index 31a514ac88..19b8ee33bd 100644
--- a/packages/shared/components/share/sub-components/ExpiredComboBox.tsx
+++ b/packages/shared/components/share/sub-components/ExpiredComboBox.tsx
@@ -37,6 +37,7 @@ import { getExpiredOptions } from "../Share.helpers";
 import { ExpiredComboBoxProps } from "../Share.types";
 
 import ShareCalendar from "./ShareCalendar";
+import { globalColors } from "../../../themes";
 import { ShareAccessRights } from "../../../enums";
 
 const ExpiredComboBox = ({
@@ -141,7 +142,7 @@ const ExpiredComboBox = ({
           The link will expire after
           <LinkWithDropdown
             className="expired-options"
-            color="#4781D1"
+            color={globalColors.lightBlueMain}
             dropdownType="alwaysDashed"
             data={expiredOptions}
             fontSize="12px"
@@ -162,7 +163,7 @@ const ExpiredComboBox = ({
         The link is valid for
         <LinkWithDropdown
           className="expired-options"
-          color="#4781D1"
+          color={globalColors.lightBlueMain}
           dropdownType="alwaysDashed"
           data={expiredOptions}
           fontSize="12px"
@@ -185,7 +186,7 @@ const ExpiredComboBox = ({
             type={LinkType.action}
             fontWeight={400}
             fontSize="12px"
-            color="#4781D1"
+            color={globalColors.lightBlueMain}
             onClick={onRemoveLink}
           >
             {t("Common:RemoveLink")}
diff --git a/packages/shared/components/slider/Slider.styled.ts b/packages/shared/components/slider/Slider.styled.ts
index 804977b287..26d2e06fd6 100644
--- a/packages/shared/components/slider/Slider.styled.ts
+++ b/packages/shared/components/slider/Slider.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { SliderThemeProps } from "./Slider.types";
 
 const StyledSlider = styled.input.attrs((props: SliderThemeProps) => ({
@@ -46,8 +46,8 @@ const StyledSlider = styled.input.attrs((props: SliderThemeProps) => ({
     props.withPouring &&
     css`
       background-image: ${props.isDisabled
-        ? `linear-gradient(#A6DCF2, #A6DCF2)`
-        : `linear-gradient(#2da7db, #2da7db)`};
+        ? `linear-gradient(${globalColors.lightSecondMainDisabled}, ${globalColors.lightSecondMainDisabled})`
+        : `linear-gradient(${globalColors.lightSecondMain}, ${globalColors.lightSecondMain})`};
     `}
 
   background-size: ${(props) => `${props.sizeProp} 100%`};
@@ -195,12 +195,13 @@ const StyledSliderTheme = styled(StyledSlider)<SliderThemeProps>`
     props.withPouring &&
     ((props.theme.isBase &&
       `linear-gradient( ${props.$currentColorScheme?.main?.accent}, ${props.$currentColorScheme?.main?.accent})`) ||
-      (!props.theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
+      (!props.theme.isBase &&
+        `linear-gradient(${globalColors.white}, ${globalColors.white})`))};
 
   &::-webkit-slider-thumb {
     background: ${(props) =>
       (props.theme.isBase && props.$currentColorScheme?.main?.accent) ||
-      (!props.theme.isBase && "#FFFFFF")};
+      (!props.theme.isBase && globalColors.white)};
     box-shadow: ${(props) =>
       !props.theme.isBase && "0px 3px 12px rgba(0, 0, 0, 0.25); !important"};
   }
@@ -210,7 +211,8 @@ const StyledSliderTheme = styled(StyledSlider)<SliderThemeProps>`
       props.withPouring &&
       ((props.theme.isBase &&
         `linear-gradient( ${props.$currentColorScheme?.main?.accent}, ${props.$currentColorScheme?.main?.accent})`) ||
-        (!props.theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
+        (!props.theme.isBase &&
+          `linear-gradient(${globalColors.white}, ${globalColors.white})`))};
   }
 
   ${(props) =>
diff --git a/packages/shared/components/snackbar/Snackbar.styled.ts b/packages/shared/components/snackbar/Snackbar.styled.ts
index ca1013ac8a..2821de6215 100644
--- a/packages/shared/components/snackbar/Snackbar.styled.ts
+++ b/packages/shared/components/snackbar/Snackbar.styled.ts
@@ -28,6 +28,7 @@ import styled, { css } from "styled-components";
 
 import { Box } from "../box";
 import { tablet } from "../../utils";
+import { globalColors } from "../../themes";
 
 const StyledIframe = styled.iframe<{ sectionWidth: number }>`
   border: none;
@@ -107,7 +108,7 @@ const StyledSnackBar = styled(Box)<{
     display: inline-block;
     border: none;
     font-size: inherit;
-    color: "#333";
+    color: ${globalColors.black};
     margin-block: 0 4px;
     margin-inline: 24px 4px;
 
@@ -123,7 +124,7 @@ const StyledSnackBar = styled(Box)<{
     background: inherit;
     border: none;
     font-size: 13px;
-    color: "#000";
+    color: ${globalColors.darkBlack};
     cursor: pointer;
     line-height: 14px;
 
@@ -140,7 +141,7 @@ const StyledAction = styled.div`
   display: inline-block;
   border: none;
   font-size: inherit;
-  color: "#333";
+  color: ${globalColors.black};
   cursor: pointer;
   text-decoration: underline;
   @media ${tablet} {
diff --git a/packages/shared/components/snackbar/Snackbar.tsx b/packages/shared/components/snackbar/Snackbar.tsx
index 5ad138eab2..00a1c79d38 100644
--- a/packages/shared/components/snackbar/Snackbar.tsx
+++ b/packages/shared/components/snackbar/Snackbar.tsx
@@ -39,6 +39,7 @@ import { BarConfig, SnackbarProps } from "./Snackbar.types";
 import { StyledAction, StyledSnackBar, StyledIframe } from "./Snackbar.styled";
 import StyledCrossIcon from "./SnackbarAction.styled";
 import StyledLogoIcon from "./SnackbarLogo.styled.ts";
+import { globalColors } from "../../themes";
 
 class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
   static show(barConfig: BarConfig) {
@@ -128,7 +129,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
       text,
       headerText,
       btnText,
-      textColor = "#000",
+      textColor = globalColors.darkBlack,
       showIcon,
       fontSize,
       fontWeight,
@@ -139,7 +140,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
       isCampaigns,
       onAction,
       sectionWidth,
-      backgroundColor = "#F7E6BE",
+      backgroundColor = globalColors.lightToastAlert,
       ...rest
     } = this.props;
 
diff --git a/packages/shared/components/snackbar/SnackbarAction.styled.ts b/packages/shared/components/snackbar/SnackbarAction.styled.ts
index a0be7eea5b..d8352ceb4d 100644
--- a/packages/shared/components/snackbar/SnackbarAction.styled.ts
+++ b/packages/shared/components/snackbar/SnackbarAction.styled.ts
@@ -29,12 +29,13 @@ import styled from "styled-components";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
 
 import { commonIconsStyles } from "../../utils";
+import { globalColors } from "../../themes";
 
 const StyledCrossIcon = styled(CrossReactSvg)`
   ${commonIconsStyles}
 
   path {
-    fill: #999976;
+    fill: ${globalColors.gray};
   }
 `;
 
diff --git a/packages/shared/components/snackbar/snackbar.stories.tsx b/packages/shared/components/snackbar/snackbar.stories.tsx
index 08f13a9bf5..de9ad35f5c 100644
--- a/packages/shared/components/snackbar/snackbar.stories.tsx
+++ b/packages/shared/components/snackbar/snackbar.stories.tsx
@@ -31,6 +31,7 @@ import { Box } from "../box";
 
 import { SnackBar } from "./Snackbar";
 import { SnackbarProps } from "./Snackbar.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/SnackBar",
@@ -68,8 +69,8 @@ export const base: Story = {
   render: (args) => <BaseTemplate {...args} />,
   args: {
     backgroundImg: "",
-    backgroundColor: "#f8f7bf",
-    textColor: "#000",
+    backgroundColor: globalColors.lightToastInfo,
+    textColor: globalColors.darkBlack,
     opacity: 1,
     headerText: "Attention",
     text: "We apologize for any short-term technical issues in service functioning, that may appear on 22.06.2021 during the update of ONLYOFFICE Personal.",
diff --git a/packages/shared/components/social-button/SocialButton.styled.tsx b/packages/shared/components/social-button/SocialButton.styled.tsx
index 8e8ad8b40b..82eb8e2b9e 100644
--- a/packages/shared/components/social-button/SocialButton.styled.tsx
+++ b/packages/shared/components/social-button/SocialButton.styled.tsx
@@ -27,7 +27,7 @@
 import React, { PropsWithChildren } from "react";
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 import type { StyledSocialButtonProps } from "./SocialButton.types";
 
@@ -192,7 +192,8 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
 
     path {
       fill: ${(props) => props.isConnect && props.theme.socialButton.svg.fill};
-      fill: ${(props) => !props.theme.isBase && !props.isConnect && "#FFFFFF"};
+      fill: ${(props) =>
+        !props.theme.isBase && !props.isConnect && globalColors.white};
     }
   }
 
diff --git a/packages/shared/components/table/Table.styled.ts b/packages/shared/components/table/Table.styled.ts
index 5b202ef8cb..cbb437d2c7 100644
--- a/packages/shared/components/table/Table.styled.ts
+++ b/packages/shared/components/table/Table.styled.ts
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { mobile, tablet } from "../../utils";
 import { IconButton } from "../icon-button";
 import { Scrollbar } from "../scrollbar";
@@ -474,7 +474,7 @@ const StyledTableSettings = styled.div`
   display: inline-block;
   position: relative;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .table-container_settings-checkbox {
     padding: 8px 16px;
diff --git a/packages/shared/components/tag/Tag.styled.ts b/packages/shared/components/tag/Tag.styled.ts
index 59f83faafb..8db41156bc 100644
--- a/packages/shared/components/tag/Tag.styled.ts
+++ b/packages/shared/components/tag/Tag.styled.ts
@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 
 import { Text } from "../text";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledTag = styled.div<{
   tagMaxWidth?: string;
@@ -96,11 +96,11 @@ const StyledTag = styled.div<{
       css`
         svg {
           path[fill] {
-            fill: #fff;
+            fill: ${globalColors.white};
         }
 
           path[stroke] {
-            stroke: #fff;
+            stroke: ${globalColors.white};
           }
         `}
     }
diff --git a/packages/shared/components/time-picker/TimePicker.styled.tsx b/packages/shared/components/time-picker/TimePicker.styled.tsx
index e0c0a9cd61..68d8b18dc0 100644
--- a/packages/shared/components/time-picker/TimePicker.styled.tsx
+++ b/packages/shared/components/time-picker/TimePicker.styled.tsx
@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   width: 57px;
@@ -34,7 +34,7 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   padding: 0px 6px;
   direction: ltr;
 
-  border: 1px solid #d0d5da;
+  border: 1px solid ${globalColors.grayStrong};
   border-radius: 3px;
 
   transition: "all 0.2s ease 0s";
@@ -42,18 +42,19 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   display: flex;
   align-items: center;
 
-  border-color: ${(props) => (props.hasError ? "#f21c0e" : "#d0d5da")};
+  border-color: ${(props) =>
+    props.hasError ? globalColors.lightErrorStatus : globalColors.grayStrong};
 
   background-color: ${(props) => props.theme.input.backgroundColor};
 
   ${(props) =>
     props.isFocused &&
     css`
-      border-color: #4781d1;
+      border-color: ${globalColors.lightBlueMain};
     `}
 
   :focus {
-    border-color: #4781d1;
+    border-color: ${globalColors.lightBlueMain};
   }
 
   input {
diff --git a/packages/shared/components/toast/Toast.styled.ts b/packages/shared/components/toast/Toast.styled.ts
index 20f3164d7d..cf2234827c 100644
--- a/packages/shared/components/toast/Toast.styled.ts
+++ b/packages/shared/components/toast/Toast.styled.ts
@@ -29,7 +29,7 @@
 import styled, { css } from "styled-components";
 import { ToastContainer } from "react-toastify";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet, mobile } from "../../utils";
 
 import { IconButton } from "../icon-button";
@@ -47,7 +47,7 @@ const StyledToastContainer = styled(ToastContainer)<{ $topOffset: number }>`
     `${parseInt(props.theme.toast.top, 10) + props.$topOffset}px`};
   inset-inline-end: ${(props) => props.theme.toast.right};
   margin-top: ${(props) => props.theme.toast.marginTop};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .Toastify__progress-bar--animated {
     animation: Toastify__trackProgress linear 1 forwards;
diff --git a/packages/shared/components/toggle-button/ToggleButton.styled.ts b/packages/shared/components/toggle-button/ToggleButton.styled.ts
index ff3b1e6474..9baa88b7ff 100644
--- a/packages/shared/components/toggle-button/ToggleButton.styled.ts
+++ b/packages/shared/components/toggle-button/ToggleButton.styled.ts
@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { NoUserSelect } from "../../utils";
 
 import {
@@ -43,7 +43,7 @@ const ToggleButtonContainer = styled.label<StyledToggleButtonProps>`
   -webkit-appearance: none;
   align-items: start;
   outline: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${NoUserSelect};
 
@@ -139,7 +139,10 @@ const ContainerToggleButtonTheme = styled(
           }
 
           circle {
-            fill: ${(isChecked && isDisabled && theme.isBase && "#FFFFFF") ||
+            fill: ${(isChecked &&
+              isDisabled &&
+              theme.isBase &&
+              globalColors.white) ||
             (isChecked && $currentColorScheme.text?.accent)};
           }
         }
diff --git a/packages/shared/components/toggle-content/ToggleContent.styled.ts b/packages/shared/components/toggle-content/ToggleContent.styled.ts
index 71d6574f89..898d64b426 100644
--- a/packages/shared/components/toggle-content/ToggleContent.styled.ts
+++ b/packages/shared/components/toggle-content/ToggleContent.styled.ts
@@ -26,13 +26,13 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledContainer = styled.div<{
   enableToggle?: boolean;
   isOpen?: boolean;
 }>`
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .toggle-container {
     display: inline-block;
diff --git a/packages/shared/components/tooltip/tooltip.stories.tsx b/packages/shared/components/tooltip/tooltip.stories.tsx
index 38849fc5d2..98239fb5b1 100644
--- a/packages/shared/components/tooltip/tooltip.stories.tsx
+++ b/packages/shared/components/tooltip/tooltip.stories.tsx
@@ -31,6 +31,7 @@ import { Text } from "../text";
 import { Tooltip } from ".";
 
 // import TooltipDocs from "./Tooltip.mdx";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Tooltip",
@@ -70,7 +71,7 @@ export const Default: Story = {
                 {content}
               </Text>
 
-              <Text color="#A3A9AE" fontSize="13px">
+              <Text color={globalColors.gray} fontSize="13px">
                 BobJohnston@gmail.com
               </Text>
 
@@ -133,7 +134,7 @@ export const AllTooltip: Story = {
               Bob Johnston
             </Text>
 
-            <Text color="#A3A9AE" fontSize="13px">
+            <Text color={globalColors.gray} fontSize="13px">
               BobJohnston@gmail.com
             </Text>
 
@@ -173,7 +174,7 @@ export const AllTooltip: Story = {
                   {arrayUsers[+content].name}
                 </Text>
 
-                <Text color="#A3A9AE" fontSize="13px">
+                <Text color={globalColors.gray} fontSize="13px">
                   {arrayUsers[+content].email}
                 </Text>
 
diff --git a/packages/shared/constants/index.ts b/packages/shared/constants/index.ts
index 92335a4d41..de09471348 100644
--- a/packages/shared/constants/index.ts
+++ b/packages/shared/constants/index.ts
@@ -31,13 +31,14 @@ import ShareTwitterReactSvgUrl from "PUBLIC_DIR/images/share.twitter.react.svg?u
 import ShareLinkedinReactSvgUrl from "PUBLIC_DIR/images/share.linkedin.react.svg?url";
 import ShareMicrosoftReactSvgUrl from "PUBLIC_DIR/images/share.microsoft.react.svg?url";
 import ShareZoomReactSvgUrl from "PUBLIC_DIR/images/share.zoom.react.svg?url";
+import { globalColors } from "../themes/globalColors";
 
 export const LOADER_STYLE = Object.freeze({
   title: "",
   width: "100%",
   height: "32",
-  backgroundColor: "#000000",
-  foregroundColor: "#000000",
+  backgroundColor: globalColors.darkBlack,
+  foregroundColor: globalColors.darkBlack,
   backgroundOpacity: 0.1,
   foregroundOpacity: 0.15,
   borderRadius: "3",
@@ -116,7 +117,7 @@ export const PROVIDERS_DATA = Object.freeze({
   twitter: {
     label: "twitter",
     icon: ShareTwitterReactSvgUrl,
-    iconOptions: { color: "#2AA3EF" },
+    iconOptions: { color: globalColors.twitterColor },
   },
   linkedin: {
     label: "linkedin",
diff --git a/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts b/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
index 8e2de66c44..14cf5cfb85 100644
--- a/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
+++ b/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
@@ -27,6 +27,7 @@
 import styled from "styled-components";
 
 import { ModalDialog } from "../../components/modal-dialog";
+import { globalColors } from "../../themes";
 
 const StyledModalDialog = styled(ModalDialog)`
   .radio {
@@ -69,7 +70,7 @@ const StyledModalDialog = styled(ModalDialog)`
     .radio-option-description {
       font-size: 12px;
       line-height: 16px;
-      color: #a3a9ae;
+      color: ${globalColors.gray};
     }
   }
 `;
diff --git a/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts b/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
index 694b7266bc..8ed652f75e 100644
--- a/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
+++ b/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
@@ -26,6 +26,7 @@
 
 import styled from "styled-components";
 import { tablet } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 const StyledPreparationPortal = styled.div<{
   errorMessage?: boolean;
@@ -40,7 +41,7 @@ const StyledPreparationPortal = styled.div<{
     font-size: 23px;
   }
   #text {
-    color: #a3a9ae;
+    color: ${globalColors.gray};
     font-size: 13px;
     line-height: 20px;
     max-width: 480px;
diff --git a/packages/shared/selectors/People/index.tsx b/packages/shared/selectors/People/index.tsx
index bda1660d16..f35545ffe1 100644
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@@ -52,6 +52,7 @@ import { AvatarRole } from "../../components/avatar";
 import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
+import { globalColors } from "../../themes";
 
 const toListItem = (
   item: TUser,
@@ -366,7 +367,7 @@ const PeopleSelector = ({
               fontSize="12px"
               noSelect
               truncate
-              color="#A3A9AE"
+              color={globalColors.gray}
               dir="auto"
             >
               {`${userType} | ${email}`}
diff --git a/packages/shared/skeletons/nav-menu/NavMenu.header.tsx b/packages/shared/skeletons/nav-menu/NavMenu.header.tsx
index 5e89c9755f..21adfbabb9 100644
--- a/packages/shared/skeletons/nav-menu/NavMenu.header.tsx
+++ b/packages/shared/skeletons/nav-menu/NavMenu.header.tsx
@@ -31,6 +31,7 @@ import { RectangleSkeleton } from "../rectangle";
 
 import { StyledHeader, StyledSpacer } from "./NavMenu.styled";
 import type { NavMenuHeaderLoaderProps } from "./NavMenu.types";
+import { globalColors } from "../../themes";
 
 export const NavMenuHeaderLoader = ({
   id,
@@ -41,8 +42,8 @@ export const NavMenuHeaderLoader = ({
   const {
     title,
     borderRadius,
-    backgroundColor = "#fff",
-    foregroundColor = "#fff",
+    backgroundColor = globalColors.white,
+    foregroundColor = globalColors.white,
     backgroundOpacity = 0.25,
     foregroundOpacity = 0.2,
     speed,
diff --git a/packages/shared/skeletons/profile/Profile.styled.ts b/packages/shared/skeletons/profile/Profile.styled.ts
index dffa9da7de..1d50896b4b 100644
--- a/packages/shared/skeletons/profile/Profile.styled.ts
+++ b/packages/shared/skeletons/profile/Profile.styled.ts
@@ -27,6 +27,7 @@
 import styled from "styled-components";
 
 import { tablet } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 export const StyledWrapper = styled.div`
   width: 660px;
@@ -46,9 +47,9 @@ export const MainBlock = styled.div`
   border-radius: 12px;
   background: linear-gradient(
       270deg,
-      rgba(0, 0, 0, 0) 23.13%,
+      ${globalColors.tapHighlight} 23.13%,
       rgba(0, 0, 0, 0.07) 50.52%,
-      rgba(0, 0, 0, 0) 78.12%
+      ${globalColors.tapHighlight} 78.12%
     ),
     rgba(0, 0, 0, 0.05);
 
diff --git a/packages/shared/skeletons/share/index.tsx b/packages/shared/skeletons/share/index.tsx
index f9d5c49a1a..006461535e 100644
--- a/packages/shared/skeletons/share/index.tsx
+++ b/packages/shared/skeletons/share/index.tsx
@@ -30,6 +30,7 @@ import styled from "styled-components";
 import { Text } from "../../components/text";
 import { TTranslation } from "../../types";
 import { RectangleSkeleton, CircleSkeleton } from "../index";
+import { globalColors } from "../../themes";
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -43,7 +44,7 @@ const StyledWrapper = styled.div`
   .title-link {
     margin-bottom: 12px;
     line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
   }
 `;
 
diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index 153c4ab75d..1f717d51b0 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -29,7 +29,6 @@ import AvatarBaseReactSvgUrl from "PUBLIC_DIR/images/avatar.base.react.svg?url";
 import { globalColors } from "./globalColors";
 import { CommonTheme } from "./commonTheme";
 import { DEFAULT_FONT_FAMILY } from "../constants";
-import { color } from "storybook-static/sb-manager/chunk-INSKDKQB";
 
 export type TColorScheme = {
   id: number;
@@ -45,53 +44,84 @@ export type TColorScheme = {
 };
 
 const {
-  black,
   white,
-
-  grayLight,
-  grayLightMid,
-  grayMid,
-
-  gray,
-  grayMain,
-  shuttleGrey,
-
-  blueMain,
-
-  blueDenim,
-  blueDenimTransparent,
-  blueMaya,
-  blueSky,
-
-  orangeMain,
-
-  orangePressed,
-
-  link,
-
-  warningColor,
-  red,
-  blueLightMid,
-
-  cyanBlueDarkShade,
-  lightCumulus,
-  lightMediumGoldenrod,
-  activeSuccess,
-  activeError,
-  activeInfo,
-  activeWarning,
-  hoverSuccess,
-  hoverError,
-  hoverInfo,
-  hoverWarning,
+  black,
   darkBlack,
-  silver,
-  lightHover,
-  strongBlue,
-  lightGrayishStrongBlue,
-  darkRed,
+
+  lightGrayBlackout,
+  darkGrayBlackout,
+  grayLight,
+  darkGrayLight,
+  lightGrayHover,
+  lightDarkGrayHover,
+  grayLightMid,
+  grayDarkMid,
+  lightGraySelected,
+  grayStrong,
+  grayDarkStrong,
+  gray,
+  grayDark,
+  lightGrayDark,
+  darkGrayDark,
+  grayText,
+  grayDarkText,
+  lightBlueMain,
+  lightBlueMainHover,
+  lightBlueMainDisabled,
+  lightBlueMainPressed,
+  lightSecondMain,
+  lightSecondMainHover,
+  lightSecondMainDisabled,
+
+  mainGreen,
 
   lightErrorStatus,
+  darkErrorStatus,
+  favoritesStatus,
+  lightStatusWarning,
+  darkStatusWarning,
+  lightStatusPositive,
+  darkStatusPositive,
+
+  lightIcons,
+  darkIcon,
+  link,
+  darkLink,
+  blueLightMid,
+
+  lightToastDone,
+  darkToastDone,
+  lightToastInfo,
+  darkToastInfo,
+  lightToastAlert,
+  darkToastAlert,
+  lightToastWarning,
+  darkToastWarning,
+
+  dndColor,
+  dndDarkColor,
+  dndHoverColor,
+  dndDarkHover,
+
+  onWhiteColor,
+  boxShadowColor,
+  loaderLight,
+
+  editorGreenColor,
+  editorBlueColor,
+  editorOrangeColor,
+  editorRedColor,
+  windowsColor,
+  linuxColor,
+  androidColor,
+  badgeShadow,
+  popupShadow,
+  menuShadow,
+  lightScroll,
+  lightScrollHover,
+  lightScrollActive,
+  silver,
+  highlandGray,
 } = globalColors;
 
 export const getBaseTheme = () => {
@@ -107,7 +137,7 @@ export const getBaseTheme = () => {
     text: {
       color: black,
       disableColor: gray,
-      emailColor: "#a3a9ae",
+      emailColor: gray,
       fontWeight: "normal",
       fontWeightBold: "bold",
     },
@@ -125,10 +155,10 @@ export const getBaseTheme = () => {
       color: black,
     },
 
-    backgroundAndSubstrateColor: "#F8F9F9",
+    backgroundAndSubstrateColor: grayLight,
 
     betaBadgeTooltip: {
-      boxShadowColor: "rgba(4, 15, 27, 0.12)",
+      boxShadowColor: badgeShadow,
     },
 
     button: {
@@ -184,7 +214,7 @@ export const getBaseTheme = () => {
         base: black,
         baseHover: black,
         baseActive: black,
-        baseDisabled: grayMid,
+        baseDisabled: grayStrong,
         primary: white,
         primaryHover: white,
         primaryActive: white,
@@ -197,26 +227,26 @@ export const getBaseTheme = () => {
         baseActive: grayLightMid,
         baseDisabled: grayLight,
 
-        primary: blueDenim,
-        primaryHover: blueDenimTransparent,
-        primaryActive: blueMaya,
-        primaryDisabled: blueSky,
+        primary: lightSecondMain,
+        primaryHover: lightSecondMainHover,
+        primaryActive: `linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`,
+        primaryDisabled: lightSecondMainDisabled,
       },
 
       border: {
-        base: `1px solid ${globalColors.grayMid}`,
-        baseHover: `1px solid ${blueDenim}`,
-        baseActive: `1px solid ${globalColors.grayMid}`,
+        base: `1px solid ${globalColors.grayStrong}`,
+        baseHover: `1px solid ${lightSecondMain}`,
+        baseActive: `1px solid ${globalColors.grayStrong}`,
         baseDisabled: `1px solid ${globalColors.grayLightMid}`,
 
-        primary: `1px solid ${blueDenim}`,
-        primaryHover: `1px solid ${blueDenimTransparent}`,
-        primaryActive: `1px solid ${blueMaya}`,
-        primaryDisabled: `1px solid ${blueSky}`,
+        primary: `1px solid ${lightSecondMain}`,
+        primaryHover: `1px solid ${lightSecondMainHover}`,
+        primaryActive: `1px solid linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`,
+        primaryDisabled: `1px solid ${lightSecondMainDisabled}`,
       },
 
       loader: {
-        base: blueDenim,
+        base: lightSecondMain,
         primary: white,
       },
     },
@@ -228,25 +258,22 @@ export const getBaseTheme = () => {
       margin: "0",
       lineHeight: "56px",
       fontWeight: "700",
-      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
       padding: "0 16px 16px",
       bodyPadding: "16px 0",
     },
 
     mainButtonMobile: {
-      textColor: grayMain,
+      textColor: lightGrayDark,
 
-      buttonColor: orangeMain,
+      buttonColor: lightStatusWarning,
       iconFill: white,
 
       circleBackground: white,
 
-      mobileProgressBarBackground: "rgb(48%, 58%, 69%, 0.4)",
+      mobileProgressBarBackground: grayStrong,
 
       bar: {
-        errorBackground: orangePressed,
-
-        icon: "#A3A9AE",
+        icon: gray,
       },
 
       buttonWrapper: {
@@ -279,7 +306,7 @@ export const getBaseTheme = () => {
         separatorBackground: white,
 
         buttonColor: white,
-        hoverButtonColor: "#3a6c9e",
+        hoverButtonColor: lightBlueMainPressed,
 
         backgroundActionMobile: blueLightMid,
       },
@@ -290,10 +317,10 @@ export const getBaseTheme = () => {
     },
 
     mainButton: {
-      backgroundColor: "#4781D1",
-      disableBackgroundColor: "rgba(71, 129, 209, 0.6)",
-      hoverBackgroundColor: "rgba(71, 129, 209, .85)",
-      clickBackgroundColor: "#4074BC",
+      backgroundColor: lightBlueMain,
+      disableBackgroundColor: lightBlueMainDisabled,
+      hoverBackgroundColor: lightBlueMainHover,
+      clickBackgroundColor: lightBlueMainPressed,
 
       padding: "5px 14px 5px 12px",
       borderRadius: "3px",
@@ -341,26 +368,26 @@ export const getBaseTheme = () => {
       outline: "none",
       width: "100%",
 
-      border: "1px solid #D0D5DA",
+      border: `1px solid ${grayStrong}`,
       background: white,
 
       borderConnect: "none",
-      connectBackground: "#3B72A7",
+      connectBackground: lightIcons,
 
-      disableBackgroundColor: "#F8F9F9",
+      disableBackgroundColor: grayLight,
 
       hoverBackground: white,
-      hoverBorder: "1px solid #5299E0",
-      hoverConnectBackground: "#316DAA",
+      hoverBorder: `1px solid ${lightSecondMain}`,
+      hoverConnectBackground: link,
       hoverConnectBorder: "none",
 
-      activeBorder: "1px solid #D0D5DA",
-      activeBackground: "#ECEEF1",
+      activeBorder: `1px solid ${grayStrong}`,
+      activeBackground: grayLightMid,
       activeConnectBorder: "none",
-      activeConnectBackground: "#265A8F",
+      activeConnectBackground: blueLightMid,
 
-      color: "rgba(0, 0, 0, 0.54)",
-      disableColor: "#333333",
+      color: gray,
+      disableColor: black,
       disabledSvgColor: "none",
 
       text: {
@@ -374,7 +401,7 @@ export const getBaseTheme = () => {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
-        color: "#A3A9AE",
+        color: gray,
         hoverColor: black,
         connectColor: white,
       },
@@ -415,7 +442,7 @@ export const getBaseTheme = () => {
     groupButtonsMenu: {
       top: "0",
       background: white,
-      boxShadow: " 0px 10px 18px -8px rgba(0, 0, 0, 0.100306)",
+      boxShadow: `0px 10px 18px -8px ${menuShadow}`,
       height: "48px",
       tabletHeight: "56px",
       padding: "0 18px 19px 0",
@@ -430,23 +457,23 @@ export const getBaseTheme = () => {
         width: "20px",
         height: "20px",
         padding: "8px",
-        hoverBackgroundColor: cyanBlueDarkShade,
-        backgroundColor: grayMid,
+        hoverBackgroundColor: grayText,
+        backgroundColor: grayStrong,
       },
     },
 
     iconButton: {
       color: gray,
-      hoverColor: grayMain,
+      hoverColor: lightGrayDark,
     },
     selectorAddButton: {
       background: grayLightMid,
-      hoverBackground: lightGrayishStrongBlue,
-      activeBackground: grayMid,
+      hoverBackground: lightGraySelected,
+      activeBackground: grayStrong,
 
-      iconColor: grayMain,
-      iconColorHover: grayMain,
-      iconColorActive: grayMain,
+      iconColor: lightGrayDark,
+      iconColorHover: lightGrayDark,
+      iconColorActive: lightGrayDark,
 
       border: `none`,
       boxSizing: "border-box",
@@ -454,7 +481,7 @@ export const getBaseTheme = () => {
       height: " 32px",
       width: "32px",
       padding: "10px",
-      color: grayMain,
+      color: lightGrayDark,
       hoverColor: black,
     },
 
@@ -468,39 +495,13 @@ export const getBaseTheme = () => {
       unsavedColor: gray,
     },
 
-    selectedItem: {
-      background: grayLight,
-      border: `1px solid ${globalColors.grayLightMid}`,
-      borderRadius: "3px",
-
-      textBox: {
-        padding: "0 8px",
-        height: "32px",
-        alignItems: "center",
-        borderRight: `1px solid ${globalColors.grayLightMid}`,
-      },
-
-      text: {
-        color: cyanBlueDarkShade,
-        disabledColor: grayMid,
-      },
-
-      closeButton: {
-        alignItems: "center",
-        padding: "0 8px",
-        color: "#979797",
-        colorHover: cyanBlueDarkShade,
-        backgroundColor: grayLightMid,
-      },
-    },
-
     checkbox: {
       fillColor: white,
-      borderColor: grayMid,
+      borderColor: grayStrong,
       arrowColor: black,
       indeterminateColor: black,
 
-      disableArrowColor: grayMid,
+      disableArrowColor: grayStrong,
       disableBorderColor: grayLightMid,
       disableFillColor: grayLight,
       disableIndeterminateColor: gray,
@@ -508,43 +509,22 @@ export const getBaseTheme = () => {
       hoverBorderColor: gray,
       hoverIndeterminateColor: black,
 
-      pressedBorderColor: grayMid,
+      pressedBorderColor: grayStrong,
       pressedFillColor: grayLightMid,
 
       focusColor: gray,
 
-      errorColor: "#F21C0E",
+      errorColor: lightErrorStatus,
     },
 
-    // slider: {
-    //   sliderBarColorProgress: blueMain,
-    //   sliderBarColorProgressDisabled: grayMid,
-    //   sliderBarColor: grayLightMid,
-    //   sliderBarDisableColor: grayLightMid,
-
-    //   sliderBarBorderActive: `1px solid ${globalColors.grayMid}`,
-    //   sliderBarBorderDisable: `1px solid ${globalColors.grayMid}`,
-
-    //   thumbFillDisable: grayLightMid,
-    //   thumbFillActive: grayLightMid,
-
-    //   thumbBorderColorActive: `1px solid ${globalColors.gray}`,
-    //   thumbBorderColorDisable: `1px solid ${globalColors.grayMid}`,
-
-    //   sliderWidth: "202px",
-
-    //   arrowHover: blueMain,
-    //   arrowColor: grayMid,
-    // },
-
     viewSelector: {
       fillColor: white,
       checkedFillColor: gray,
       fillColorDisabled: grayLight,
       disabledFillColor: grayLightMid,
-      disabledFillColorInner: grayMid,
+      disabledFillColorInner: grayStrong,
       hoverBorderColor: gray,
-      borderColor: grayMid,
+      borderColor: grayStrong,
     },
 
     radioButton: {
@@ -557,33 +537,19 @@ export const getBaseTheme = () => {
       disableBackground: grayLight,
 
       fillColor: black,
-      borderColor: grayMid,
+      borderColor: grayStrong,
 
-      disableFillColor: grayMid,
+      disableFillColor: grayStrong,
       disableBorderColor: grayLightMid,
 
       hoverBorderColor: gray,
     },
 
-    requestLoader: {
-      backgroundColor: white,
-      border: `1px solid ${globalColors.veryLightGrey}`,
-      overflow: "hidden",
-      padding: "5px 10px",
-      lineHeight: "16px",
-      borderRadius: "5px",
-      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-
-      marginRight: "10px",
-      top: "10px",
-      width: "100%",
-    },
-
     row: {
       minHeight: "47px",
       width: "100%",
       borderBottom: globalColors.grayLightMid,
-      backgroundColor: globalColors.lightHover,
+      backgroundColor: globalColors.lightGrayHover,
       minWidth: "160px",
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -635,14 +601,14 @@ export const getBaseTheme = () => {
       lineHeight: "0.8",
       overflow: "hidden",
       color: white,
-      backgroundColor: orangeMain,
-      disableBackgroundColor: "#A3A9AE",
+      backgroundColor: lightStatusWarning,
+      disableBackgroundColor: gray,
     },
 
     scrollbar: {
-      bgColor: "rgba(6, 22, 38, 0.16)",
-      hoverBgColor: "rgba(6, 22, 38, 0.32)",
-      pressBgColor: "rgba(6, 22, 38, 0.5)",
+      bgColor: lightScroll,
+      hoverBgColor: lightScrollHover,
+      pressBgColor: lightScrollActive,
       paddingInlineEnd: "17px !important",
       paddingInlineEndMobile: "8px !important",
     },
@@ -657,7 +623,7 @@ export const getBaseTheme = () => {
       margin: " 0 auto",
       minHeight: "100%",
 
-      colorDisabledFileIcons: "#f3f4f4",
+      colorDisabledFileIcons: lightGrayHover,
 
       backdrop: {
         backgroundRGBA: {
@@ -685,12 +651,7 @@ export const getBaseTheme = () => {
         },
       },
 
-      header: {
-        borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
-      },
-
       closeButton: {
-        // backgroundColor: "#9a9ea3",
         fillColor: white,
       },
     },
@@ -714,7 +675,7 @@ export const getBaseTheme = () => {
 
     input: {
       color: black,
-      disableColor: grayMid,
+      disableColor: grayStrong,
 
       backgroundColor: white,
       disableBackgroundColor: grayLight,
@@ -732,19 +693,19 @@ export const getBaseTheme = () => {
       boxSizing: "border-box",
       border: "solid 1px",
 
-      borderColor: grayMid,
-      errorBorderColor: "#F21C0E",
-      warningBorderColor: warningColor,
+      borderColor: grayStrong,
+      errorBorderColor: lightErrorStatus,
+      warningBorderColor: lightStatusWarning,
       disabledBorderColor: grayLightMid,
 
       hoverBorderColor: gray,
-      hoverErrorBorderColor: red,
-      hoverWarningBorderColor: warningColor,
+      hoverErrorBorderColor: lightErrorStatus,
+      hoverWarningBorderColor: lightStatusWarning,
       hoverDisabledBorderColor: grayLightMid,
 
-      focusBorderColor: blueMain,
-      focusErrorBorderColor: red,
-      focusWarningBorderColor: warningColor,
+      focusBorderColor: lightSecondMain,
+      focusErrorBorderColor: lightErrorStatus,
+      focusWarningBorderColor: lightStatusWarning,
       focusDisabledBorderColor: grayLightMid,
     },
 
@@ -808,10 +769,10 @@ export const getBaseTheme = () => {
     },
 
     passwordInput: {
-      disableColor: grayMid,
+      disableColor: grayStrong,
       color: gray,
 
-      iconColor: grayMid,
+      iconColor: grayStrong,
       hoverIconColor: gray,
 
       hoverColor: gray,
@@ -854,19 +815,19 @@ export const getBaseTheme = () => {
       fontSize: "14px",
       fontWeight: "600",
 
-      iconColor: grayMid,
-      hoverIconColor: grayMid,
+      iconColor: grayStrong,
+      hoverIconColor: grayStrong,
     },
 
     inputPhone: {
-      activeBorderColor: "#2da7db",
-      inactiveBorderColor: "#d0d5da",
-      errorBorderColor: "#f21c0e",
-      backgroundColor: "#fff",
-      color: "#33333",
-      scrollBackground: "#a3a9ae",
-      placeholderColor: "#a3a9ae",
-      dialCodeColor: "#a3a9ae",
+      activeBorderColor: lightSecondMain,
+      inactiveBorderColor: grayStrong,
+      errorBorderColor: lightErrorStatus,
+      backgroundColor: white,
+      color: black,
+      scrollBackground: gray,
+      placeholderColor: gray,
+      dialCodeColor: gray,
       width: "320px",
       height: "44px",
     },
@@ -874,7 +835,7 @@ export const getBaseTheme = () => {
     textInput: {
       fontWeight: "normal",
       placeholderColor: gray,
-      disablePlaceholderColor: grayMid,
+      disablePlaceholderColor: grayStrong,
 
       transition: "all 0.2s ease 0s",
       appearance: "none",
@@ -919,23 +880,23 @@ export const getBaseTheme = () => {
       padding: "2px 0px 2px 2px",
       margin: "0",
 
-      borderColor: blueMain,
+      borderColor: lightSecondMain,
 
       iconColor: gray,
-      hoverIconColor: grayMain,
+      hoverIconColor: lightGrayDark,
     },
 
     textArea: {
       disabledColor: grayLight,
 
-      focusBorderColor: blueMain,
-      focusErrorBorderColor: red,
+      focusBorderColor: lightSecondMain,
+      focusErrorBorderColor: lightErrorStatus,
       focusOutline: "none",
 
       scrollWidth: "100%",
       scrollHeight: "91px",
 
-      numerationColor: "#A3A9AE",
+      numerationColor: gray,
 
       copyIconFilter:
         "invert(71%) sepia(1%) saturate(1597%) hue-rotate(166deg) brightness(100%) contrast(73%)",
@@ -975,17 +936,17 @@ export const getBaseTheme = () => {
       },
 
       color: {
-        default: "#A3A9AE",
-        hover: "#555F65",
-        active: "#333333",
-        focus: "#333333",
+        default: gray,
+        hover: grayText,
+        active: black,
+        focus: black,
       },
 
       background: {
         default: "transparent",
-        hover: "#ECEEF1",
-        active: "#D0D5DA",
-        focus: "#DFE2E3",
+        hover: grayLightMid,
+        active: grayStrong,
+        focus: lightGraySelected,
       },
 
       caret: {
@@ -1007,14 +968,14 @@ export const getBaseTheme = () => {
 
     tooltip: {
       borderRadius: "6px",
-      boxShadow: "0px 10px 15px rgba(4, 15, 27, 0.12)",
+      boxShadow: `0px 10px 15px ${popupShadow}`,
       opacity: "1",
       padding: "8px 12px",
       pointerEvents: "auto",
       maxWidth: "340px",
       color: white,
       textColor: black,
-      backgroundColor: "#F8F9F9",
+      backgroundColor: grayLight,
 
       before: {
         border: "none",
@@ -1069,7 +1030,7 @@ export const getBaseTheme = () => {
       },
 
       errorLabel: {
-        color: "#F21C0E",
+        color: lightErrorStatus,
       },
     },
 
@@ -1128,8 +1089,8 @@ export const getBaseTheme = () => {
       },
 
       imageContainer: {
-        backgroundImage: blueMain,
-        background: grayMid,
+        backgroundImage: lightSecondMain,
+        background: grayStrong,
         groupBackground: grayLightMid,
         borderRadius: "50%",
         height: "100%",
@@ -1144,19 +1105,19 @@ export const getBaseTheme = () => {
       },
 
       administrator: {
-        fill: orangeMain,
+        fill: lightStatusWarning,
         stroke: darkBlack,
         color: white,
       },
 
       guest: {
-        fill: "#3B72A7",
+        fill: lightIcons,
         stroke: darkBlack,
         color: white,
       },
 
       owner: {
-        fill: "#EDC409",
+        fill: favoritesStatus,
         stroke: darkBlack,
         color: white,
       },
@@ -1178,8 +1139,8 @@ export const getBaseTheme = () => {
       },
 
       icon: {
-        background: "#ECEEF1",
-        color: "#A3A9AE",
+        background: grayLightMid,
+        color: gray,
       },
 
       width: {
@@ -1233,23 +1194,23 @@ export const getBaseTheme = () => {
           marginTop: "-9.4px",
           width: "24px",
           height: "24px",
-          background: blueMain,
-          disabledBackground: "#A6DCF2",
+          background: lightSecondMain,
+          disabledBackground: lightSecondMainDisabled,
           borderWidth: "6px",
           borderStyle: "solid",
           borderColor: `${white}`,
           borderRadius: "30px",
-          boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+          boxShadow: `0px 5px 20px ${popupShadow}`,
         },
 
         thumb: {
           width: "24px",
           height: "24px",
-          background: blueMain,
+          background: lightSecondMain,
           border: `6px solid ${white}`,
           borderRadius: "30px",
           marginTop: "0px",
-          boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+          boxShadow: `0px 5px 20px ${popupShadow}`,
         },
 
         rangeTrack: {
@@ -1263,10 +1224,10 @@ export const getBaseTheme = () => {
         rangeThumb: {
           width: "14px",
           height: "14px",
-          background: blueMain,
+          background: lightSecondMain,
           border: `6px solid ${white}`,
           borderRadius: "30px",
-          boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+          boxShadow: `0px 5px 20px ${popupShadow}`,
         },
 
         track: {
@@ -1279,7 +1240,7 @@ export const getBaseTheme = () => {
         },
 
         trackNumber: {
-          color: "#A3A9AE",
+          color: gray,
         },
 
         fillLower: {
@@ -1297,10 +1258,6 @@ export const getBaseTheme = () => {
         },
       },
 
-      dropZone: {
-        border: `1px dashed ${silver}`,
-      },
-
       container: {
         miniPreview: {
           width: "160px",
@@ -1337,78 +1294,19 @@ export const getBaseTheme = () => {
     },
 
     backdrop: {
-      backgroundColor: "rgba(6, 22, 38, 0.2)",
+      backgroundColor: lightGrayBlackout,
       unsetBackgroundColor: "unset",
     },
 
-    treeMenu: {
-      disabledColor: "#767676",
-    },
-
-    treeNode: {
-      background: "#f3f4f4",
-      disableColor: "#A3A9AE",
-
-      dragging: {
-        draggable: {
-          background: lightCumulus,
-          hoverBackgroundColor: lightMediumGoldenrod,
-          borderRadius: "3px",
-        },
-
-        title: {
-          width: "85%",
-        },
-      },
-      icon: {
-        color: grayMain,
-      },
-
-      draggable: {
-        color: cyanBlueDarkShade,
-        dragOverBackgroundColor: strongBlue,
-        border: `1px ${strongBlue} solid`,
-        dragOverColor: white,
-
-        gapTop: {
-          borderTop: `2px blue solid`,
-        },
-
-        gapBottom: {
-          borderBottom: `2px blue solid`,
-        },
-      },
-
-      contentWrapper: {
-        color: darkRed,
-      },
-
-      title: {
-        color: cyanBlueDarkShade,
-      },
-
-      selected: {
-        background: lightGrayishStrongBlue,
-        hoverBackgroundColor: lightGrayishStrongBlue,
-        borderRadius: "3px",
-      },
-
-      checkbox: {
-        border: `2px solid ${white}`,
-        borderTop: 0,
-        borderLeft: 0,
-      },
-    },
-
     progressBar: {
-      backgroundColor: "#F3F4F4",
+      backgroundColor: lightGrayHover,
 
       animation: {
-        background: "#4781D1",
+        background: lightBlueMain,
       },
 
       percent: {
-        background: "#4781D1",
+        background: lightBlueMain,
       },
 
       color: {
@@ -1423,7 +1321,7 @@ export const getBaseTheme = () => {
       zIndex: "400",
       background: white,
       borderRadius: "6px",
-      boxShadow: "0px 8px 16px 0px #040F1B14",
+      boxShadow: `0px 8px 16px 0px ${boxShadowColor}`,
       border: "none",
     },
 
@@ -1433,7 +1331,7 @@ export const getBaseTheme = () => {
       backgroundColor: white,
       hoverBackgroundColor: grayLight,
       hoverDisabledBackgroundColor: white,
-      selectedBackgroundColor: lightHover,
+      selectedBackgroundColor: lightGrayHover,
       fontWeight: "600",
       fontSize: "13px",
       width: "100%",
@@ -1466,16 +1364,16 @@ export const getBaseTheme = () => {
 
     toast: {
       active: {
-        success: activeSuccess,
-        error: activeError,
-        info: activeInfo,
-        warning: activeWarning,
+        success: lightToastDone,
+        error: lightToastWarning,
+        info: lightToastInfo,
+        warning: lightToastAlert,
       },
       hover: {
-        success: hoverSuccess,
-        error: hoverError,
-        info: hoverInfo,
-        warning: hoverWarning,
+        success: lightToastDone,
+        error: lightToastWarning,
+        info: lightToastInfo,
+        warning: lightToastAlert,
       },
       border: {
         success: "none",
@@ -1506,7 +1404,7 @@ export const getBaseTheme = () => {
 
       main: {
         marginBottom: "1rem",
-        boxShadow: "0px 10px 16px -12px rgba(0, 0, 0, 0.3)",
+        boxShadow: `0px 10px 16px -12px ${popupShadow}`,
         maxHeight: "800px",
         overflow: "hidden",
         borderRadius: "6px",
@@ -1558,7 +1456,7 @@ export const getBaseTheme = () => {
     },
 
     loader: {
-      color: shuttleGrey,
+      color: loaderLight,
       size: "40px",
       marginRight: "2px",
       borderRadius: "50%",
@@ -1567,80 +1465,30 @@ export const getBaseTheme = () => {
     rombsLoader: {
       blue: {
         colorStep_1: "#F2CBBF",
-        colorStep_2: "#fff",
+        colorStep_2: white,
         colorStep_3: "#E6E4E4",
         colorStep_4: "#D2D2D2",
       },
       red: {
         colorStep_1: "#BFE8F8",
-        colorStep_2: "#fff",
+        colorStep_2: white,
         colorStep_3: "#EFEFEF",
       },
       green: {
         colorStep_1: "#CBE0AC",
-        colorStep_2: "#fff",
+        colorStep_2: white,
         colorStep_3: "#EFEFEF",
         colorStep_4: "#E6E4E4",
       },
     },
 
     dialogLoader: {
-      borderBottom: "1px solid rgb(222, 226, 230)",
+      borderBottom: `1px solid ${loaderLight}`,
     },
 
-    // dropDownItem: {
-    //   width: "100%",
-    //   maxWidth: "240px",
-    //   border: "none",
-    //   cursor: "pointer",
-    //   padding: "0px 16px",
-    //   lineHeight: "32px",
-    //   textAlign: "left",
-    //   background: "none",
-    //   textDecoration: "none",
-    //   fontStyle: "normal",
-    //   fontWeight: "600",
-    //   fontSize: "13px",
-
-    //   whiteSpace: "nowrap",
-    //   overflow: "hidden",
-    //   textOverflow: "ellipsis",
-
-    //   outline: "none",
-    //   color: black,
-    //   textTransform: "none",
-
-    //   hoverBackgroundColor: grayLight,
-    //   noHoverBackgroundColor: white,
-
-    //   header: {
-    //     color: gray,
-    //     hoverCursor: "default",
-    //     hoverBackgroundColor: "white",
-    //     textTransform: "uppercase",
-    //   },
-
-    //   disabled: {
-    //     color: gray,
-    //     hoverCursor: "default",
-    //     hoverBackgroundColor: "white",
-    //   },
-
-    //   separator: {
-    //     padding: "0px 16px",
-    //     border: `0.5px solid ${grayLightMid}`,
-    //     cursor: "default",
-    //     margin: "6px 16px 6px",
-    //     lineHeight: "1px",
-    //     height: "1px",
-    //     width: "calc(100% - 32px)",
-    //   },
-
-    //   tablet: { lineHeight: "36px" },
-
     comboBox: {
       padding: "6px 0px",
-      background: lightGrayishStrongBlue,
+      background: lightGraySelected,
 
       width: {
         base: "173px",
@@ -1672,32 +1520,32 @@ export const getBaseTheme = () => {
         selectPaddingRight: "6px",
 
         color: black,
-        disabledColor: grayMid,
+        disabledColor: grayStrong,
         background: white,
         backgroundWithBorder: "none",
         backgroundModernView: "none",
 
-        border: `1px solid ${grayMid}`,
+        border: `1px solid ${grayStrong}`,
         borderRadius: "3px",
-        borderColor: blueMain,
-        openBorderColor: blueMain,
+        borderColor: lightSecondMain,
+        openBorderColor: lightSecondMain,
         disabledBorderColor: grayLightMid,
         disabledBackground: grayLight,
 
         hoverBorderColor: gray,
-        hoverBorderColorOpen: blueMain,
+        hoverBorderColorOpen: lightSecondMain,
         hoverDisabledBorderColor: grayLightMid,
 
-        hoverBackgroundModernView: "#ECEEF1",
-        activeBackgroundModernView: "#D0D5DA",
-        focusBackgroundModernView: "#DFE2E3",
+        hoverBackgroundModernView: grayLightMid,
+        activeBackgroundModernView: grayStrong,
+        focusBackgroundModernView: lightGraySelected,
       },
 
       label: {
         marginRightWithBorder: "13px",
         marginRight: "4px",
 
-        disabledColor: grayMid,
+        disabledColor: grayStrong,
         color: black,
         alternativeColor: gray,
         selectedColor: black,
@@ -1712,9 +1560,9 @@ export const getBaseTheme = () => {
         width: "16px",
         height: "16px",
 
-        defaultDisabledColor: grayMid,
+        defaultDisabledColor: grayStrong,
         defaultColor: gray,
-        disabledColor: grayMid,
+        disabledColor: grayStrong,
         color: black,
         selectedColor: black,
       },
@@ -1722,7 +1570,7 @@ export const getBaseTheme = () => {
       plusBadge: {
         color: white,
         bgColor: gray,
-        selectedBgColor: grayMain,
+        selectedBgColor: lightGrayDark,
       },
     },
 
@@ -1742,9 +1590,9 @@ export const getBaseTheme = () => {
     },
 
     toggleButton: {
-      fillColorDefault: "#4781D1",
-      fillColorOff: "#D0D5DA",
-      hoverFillColorOff: "#A3A9AE",
+      fillColorDefault: lightBlueMain,
+      fillColorOff: grayStrong,
+      hoverFillColorOff: gray,
       fillCircleColor: white,
       fillCircleColorOff: white,
     },
@@ -1761,7 +1609,7 @@ export const getBaseTheme = () => {
         margin: "0",
         lineHeight: "56px",
         fontWeight: "700",
-        borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+        borderBottom: `1px solid ${grayStrong}`,
       },
 
       bodyContent: {
@@ -1770,17 +1618,17 @@ export const getBaseTheme = () => {
     },
 
     calendar: {
-      color: "#333333",
-      disabledColor: "#DFE2E3",
-      pastColor: "#A3A9AE",
-      onHoverBackground: "#f3f4f4",
-      titleColor: "#555F65",
-      outlineColor: "#eceef1",
-      arrowColor: "#555f65",
-      disabledArrow: "#A3A9AE",
-      weekdayColor: "#A3A9AE",
-      accent: "#4781d1",
-      boxShadow: "0px 12px 40px rgba(4, 15, 27, 0.12)",
+      color: black,
+      disabledColor: lightGraySelected,
+      pastColor: gray,
+      onHoverBackground: lightGrayHover,
+      titleColor: grayText,
+      outlineColor: grayLightMid,
+      arrowColor: grayText,
+      disabledArrow: gray,
+      weekdayColor: gray,
+      accent: lightBlueMain,
+      boxShadow: `0px 12px 40px ${popupShadow}`,
     },
 
     datePicker: {
@@ -1789,14 +1637,14 @@ export const getBaseTheme = () => {
       contentPadding: "0 16px 16px",
       bodyPadding: "16px 0",
       backgroundColor: white,
-      inputBorder: blueMain,
+      inputBorder: lightSecondMain,
       iconPadding: "8px 8px 7px 0px",
 
       contentMaxWidth: "500px",
       contentLineHeight: "56px",
       contentFontWeight: "700",
 
-      borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+      borderBottom: `1px solid ${grayStrong}`,
     },
 
     aside: {
@@ -1814,122 +1662,53 @@ export const getBaseTheme = () => {
 
     dragAndDrop: {
       height: "100%",
-      border: `1px solid ${globalColors.darkSilver}`,
       transparentBorder: "1px solid transparent",
-      acceptBackground: lightMediumGoldenrod,
-      background: lightCumulus,
+      acceptBackground: dndHoverColor,
+      background: dndColor,
     },
 
-    // phoneInput: {
-    //   width: "304px",
-    //   height: "44px",
-    //   itemTextColor: black,
-    //   itemBackgroundColor: white,
-    //   itemHoverColor: grayLightMid,
-    //   scrollBackground: "rgba(0, 0, 0, 0.1)",
-    //   placeholderColor: gray,
-    // },
-
-    // squareButton: {
-    //   height: "32px",
-    //   width: "32px",
-    //   color: gray,
-    //   backgroundColor: white,
-    //   border: `1px solid ${grayMid}`,
-    //   borderRadius: "3px",
-    //   outline: "none",
-    //   hover: {
-    //     backgroundColor: white,
-    //     border: `1px solid ${gray}`,
-    //   },
-    //   click: {
-    //     backgroundColor: grayLightMid,
-    //     border: `1px solid ${gray}`,
-    //   },
-    //   disable: {
-    //     backgroundColor: grayLight,
-    //     border: `1px solid ${grayLightMid}`,
-    //   },
-    //   crossShape: {
-    //     color: graySilver,
-    //     disable: {
-    //       color: gray,
-    //     },
-    //   },
-    // },
-
-    // roundButton: {
-    //   height: "40px",
-    //   width: "40px",
-    //   backgroundColor: grayLight,
-    //   borderRadius: {
-    //     plus: "112px",
-    //     minus: "81px",
-    //   },
-    //   borderStyle: "none",
-    //   outline: "none",
-    //   hover: {
-    //     backgroundColor: grayLightMid,
-    //   },
-    //   click: {
-    //     backgroundColor: grayMid,
-    //   },
-    //   disable: {
-    //     backgroundColor: grayLight,
-    //   },
-    //   plus: {
-    //     color: grayMid,
-    //     disable: {
-    //       color: black,
-    //     },
-    //   },
-    // },
-
     catalog: {
-      background: "#f8f9f9",
+      background: grayLight,
 
       header: {
-        borderBottom: "1px solid #eceef1",
-        iconFill: "#657077",
+        borderBottom: `1px solid ${grayLightMid}`,
+        iconFill: lightGrayDark,
       },
       control: {
-        background: "#9a9ea3",
-        fill: "#ffffff",
+        fill: white,
       },
 
-      headerBurgerColor: "#657077",
+      headerBurgerColor: lightGrayDark,
 
-      verticalLine: "1px solid #eceef1",
+      verticalLine: `1px solid ${grayLightMid}`,
 
       profile: {
-        borderTop: "1px solid #eceef1",
-        background: "#f3f4f4",
+        borderTop: `1px solid ${grayLightMid}`,
+        background: lightGrayHover,
       },
 
       paymentAlert: {
-        color: "#ed7309",
-        warningColor: "#F21C0E",
-      },
-
-      teamTrainingAlert: {
-        titleColor: "#388BDE",
-        borderColor: "#388BDE",
-        linkColor: "#5299E0",
+        color: lightStatusWarning,
+        warningColor: lightErrorStatus,
       },
     },
 
     alertComponent: {
-      descriptionColor: "#555F65",
-      iconColor: "#657077",
+      descriptionColor: grayText,
+      iconColor: lightGrayDark,
     },
 
     catalogItem: {
+      header: {
+        color: gray,
+        background: grayStrong,
+      },
       container: {
         width: "100%",
         height: "36px",
         padding: "0 12px",
         marginBottom: "16px",
-        background: "#fff",
+        background: white,
         tablet: {
           height: "44px",
           padding: "0 12px",
@@ -1938,7 +1717,7 @@ export const getBaseTheme = () => {
       },
       sibling: {
         active: {
-          background: lightGrayishStrongBlue,
+          background: lightGraySelected,
         },
         hover: {
           background: grayLightMid,
@@ -1949,8 +1728,8 @@ export const getBaseTheme = () => {
           width: "16px",
           height: "16px",
 
-          fill: "#657077",
-          isActiveFill: "#4781D1",
+          fill: lightGrayDark,
+          isActiveFill: lightBlueMain,
           tablet: {
             width: "20px",
             height: "20px",
@@ -1961,8 +1740,8 @@ export const getBaseTheme = () => {
         width: "100%",
         marginLeft: "8px",
         lineHeight: "20px",
-        color: cyanBlueDarkShade,
-        isActiveColor: "#4781D1",
+        color: grayText,
+        isActiveColor: lightBlueMain,
         fontSize: "13px",
         fontWeight: 600,
         tablet: {
@@ -1995,272 +1774,256 @@ export const getBaseTheme = () => {
         },
       },
       badgeWithoutText: {
-        backgroundColor: orangeMain,
+        backgroundColor: lightStatusWarning,
 
         size: "8px",
         position: "-4px",
       },
-      trashIconFill: "#A3A9AE",
+      trashIconFill: gray,
     },
 
     navigation: {
       expanderColor: black,
       background: white,
-      rootFolderTitleColor: "#A3A9AE",
-      boxShadow: "0px 8px 16px 0px #040F1B14",
+      rootFolderTitleColor: gray,
+      boxShadow: `0px 8px 16px 0px ${boxShadowColor}`,
 
       icon: {
-        fill: "#316DAA",
-        stroke: "#DFE2E3",
+        fill: link,
+        stroke: lightGraySelected,
       },
     },
 
     nav: {
-      backgroundColor: "#0F4071",
+      backgroundColor: lightBlueMain,
     },
 
     navItem: {
-      baseColor: "#7A95B0",
+      baseColor: lightSecondMain,
       activeColor: white,
-      separatorColor: "#3E668D",
+      separatorColor: lightSecondMainHover,
 
       wrapper: {
-        hoverBackground: "#0d3760",
+        hoverBackground: lightBlueMainHover,
       },
     },
 
     header: {
-      backgroundColor: "#F8F9F9",
-      recoveryColor: "#657077",
-      linkColor: "#657077",
+      backgroundColor: grayLight,
+      recoveryColor: lightGrayDark,
+      linkColor: lightGrayDark,
       productColor: white,
       height: "48px",
     },
 
     menuContainer: {
-      background: "#F3F4F4",
+      background: lightGrayHover,
       color: black,
     },
 
     article: {
       background: grayLight,
       pinBorderColor: grayLightMid,
-      catalogItemHeader: "#A3A9AE",
-      catalogItemText: "#555F65",
-      catalogItemActiveBackground: "#DFE2E3",
-      catalogShowText: "#657077",
+      catalogItemHeader: gray,
+      catalogItemText: grayText,
+      catalogItemActiveBackground: lightGraySelected,
+      catalogShowText: lightGrayDark,
     },
 
     section: {
-      toggler: {
-        background: white,
-        fill: gray,
-        boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
-      },
-
       header: {
         backgroundColor: white,
-        background: `linear-gradient(180deg,#ffffff 2.81%,rgba(255, 255, 255, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`,
-        trashErasureLabelBackground: "#f8f9f9",
-        trashErasureLabelText: "#555f65",
+        background: `linear-gradient(180deg, ${white} 2.81%,${grayDarkText} 63.03%,rgba(255, 255, 255, 0) 100%)`,
+        trashErasureLabelBackground: grayLight,
+        trashErasureLabelText: grayText,
       },
     },
 
     infoPanel: {
       sectionHeaderToggleIcon: gray,
-      sectionHeaderToggleIconActive: "#3B72A7",
+      sectionHeaderToggleIconActive: lightIcons,
       sectionHeaderToggleBg: "transparent",
       sectionHeaderToggleBgActive: grayLight,
 
       backgroundColor: white,
-      blurColor: "rgba(6, 22, 38, 0.2)",
+      blurColor: lightGrayBlackout,
       borderColor: grayLightMid,
       thumbnailBorderColor: grayLightMid,
       textColor: black,
-      errorColor: "#F21C0E",
+      errorColor: lightErrorStatus,
 
       closeButtonWrapperPadding: "0px",
       closeButtonIcon: white,
       closeButtonSize: "17px",
-      closeButtonBg: "transparent",
 
-      nameColor: "#858585",
-      avatarColor: "#555F65",
+      nameColor: grayDark,
+      avatarColor: grayText,
 
       links: {
-        color: "#4781D1",
-        iconColor: "#3B72A7",
-        iconErrorColor: "#F24724",
-        primaryColor: "#555F65",
+        color: lightBlueMain,
+        iconColor: lightIcons,
+        iconErrorColor: lightErrorStatus,
+        primaryColor: grayText,
       },
 
       members: {
-        iconColor: "#A3A9AE",
-        iconHoverColor: "#657077",
-        isExpectName: "#A3A9AE",
-        subtitleColor: "#a3a9ae",
-        meLabelColor: "#a3a9ae",
-        roleSelectorColor: "#a3a9ae",
-        disabledRoleSelectorColor: "#a3a9ae",
-        roleSelectorArrowColor: "#a3a9ae",
-        createLink: "#a3a9ae",
-        linkAccessComboboxExpired: "#a3a9ae",
+        iconColor: gray,
+        iconHoverColor: lightGrayDark,
+        isExpectName: gray,
+        subtitleColor: gray,
+        meLabelColor: gray,
+        roleSelectorColor: gray,
+        disabledRoleSelectorColor: gray,
+        roleSelectorArrowColor: gray,
+        createLink: gray,
+        linkAccessComboboxExpired: gray,
+        crossFill: lightGrayDark,
       },
 
       history: {
-        subtitleColor: "#a3a9ae",
-        fileBlockBg: "#f8f9f9",
-        dateColor: "#A3A9AE",
-        fileExstColor: "#A3A9AE",
-        locationIconColor: "#A3A9AE",
-        folderLabelColor: "#A3A9AE",
-        renamedItemColor: "#A3A9AE",
-        oldRoleColor: "#657077",
-        messageColor: "#333333",
+        subtitleColor: gray,
+        fileBlockBg: grayLight,
+        dateColor: gray,
+        fileExstColor: gray,
+        locationIconColor: gray,
+        folderLabelColor: gray,
+        renamedItemColor: gray,
+        oldRoleColor: lightGrayDark,
+        messageColor: black,
       },
 
       details: {
         customLogoBorderColor: grayLightMid,
-        commentEditorIconColor: "#333",
-        tagBackground: "#ECEEF1",
+        commentEditorIconColor: black,
+        tagBackground: grayLightMid,
       },
 
       gallery: {
-        borderColor: "#d0d5da",
-        descriptionColor: "#657077",
+        borderColor: grayStrong,
+        descriptionColor: lightGrayDark,
       },
 
       search: {
-        boxShadow: "0px 5px 20px 0px rgba(4, 15, 27, 0.07)",
+        boxShadow: `0px 5px 20px 0px ${menuShadow}`,
+      },
+
+      groups: {
+        textColor: gray,
+        tagColor: grayStrong,
       },
     },
 
     filesArticleBody: {
-      background: lightGrayishStrongBlue,
-      panelBackground: lightGrayishStrongBlue,
+      background: lightGraySelected,
+      panelBackground: lightGraySelected,
 
-      fill: grayMain,
+      fill: lightGrayDark,
       expanderColor: "dimgray",
       downloadAppList: {
-        textColor: "#A3A9AE",
-        color: "#CDCFD1",
-        winHoverColor: "#3785D3",
-        macHoverColor: "#000",
-        linuxHoverColor: "#FFB800",
-        androidHoverColor: "#9BD71C",
-        iosHoverColor: "#000",
-      },
-      thirdPartyList: {
-        color: "#818b91",
-        linkColor: cyanBlueDarkShade,
+        textColor: gray,
+        color: gray,
+        winHoverColor: windowsColor,
+        macHoverColor: darkBlack,
+        linuxHoverColor: linuxColor,
+        androidHoverColor: androidColor,
+        iosHoverColor: darkBlack,
       },
       devTools: {
-        border: "1px solid #DFE2E3",
-        color: "#A3A9AE",
+        border: `1px solid ${lightGraySelected}`,
+        color: gray,
       },
     },
 
     peopleArticleBody: {
-      iconColor: grayMain,
+      iconColor: lightGrayDark,
       expanderColor: "dimgray",
     },
 
     peopleTableRow: {
-      fill: "#3b72a7",
-
       nameColor: black,
       pendingNameColor: gray,
 
       sideInfoColor: gray,
-      pendingSideInfoColor: grayMid,
+      pendingSideInfoColor: grayStrong,
     },
 
     filterInput: {
       button: {
-        border: "1px solid #d0d5da",
-        hoverBorder: "1px solid #a3a9ae",
+        border: `1px solid ${grayStrong}`,
+        hoverBorder: `1px solid ${gray}`,
 
-        openBackground: "#a3a9ae",
+        openBackground: gray,
 
-        openFill: "#ffffff",
+        openFill: white,
       },
 
       filter: {
-        background: "#ffffff",
-        border: "1px solid #eceef1",
-        color: "#a3a9ae",
+        background: white,
+        border: `1px solid ${grayLightMid}`,
+        color: gray,
 
-        separatorColor: "#eceef1",
-        indicatorColor: "#ED7309",
+        separatorColor: grayLightMid,
+        indicatorColor: lightStatusWarning,
 
         selectedItem: {
-          background: "#265a8f",
-          border: "#265a8f",
-          color: "#ffffff",
+          background: blueLightMid,
+          border: blueLightMid,
+          color: white,
         },
       },
 
       sort: {
-        background: "#ffffff",
-        hoverBackground: "#f8f9f9",
-        selectedViewIcon: "#dfe2e3",
-        viewIcon: "#a3a9ae",
-        sortFill: "#657077",
+        background: white,
+        hoverBackground: grayLight,
+        selectedViewIcon: lightGraySelected,
+        viewIcon: gray,
+        sortFill: lightGrayDark,
 
         tileSortFill: black,
         tileSortColor: black,
       },
 
       selectedItems: {
-        background: "#eceef1",
-        hoverBackground: "#F3F4F4",
+        background: grayLightMid,
+        hoverBackground: lightGrayHover,
       },
     },
 
-    profileInfo: {
-      color: "#83888d",
-      iconButtonColor: black,
-      linkColor: gray,
-
-      tooltipLinkColor: black,
-      iconColor: "#C96C27",
-    },
-
     updateUserForm: {
       tooltipTextColor: black,
-      borderTop: "1px solid #eceef1",
+      borderTop: `1px solid ${grayLightMid}`,
     },
 
     tableContainer: {
-      borderRight: `2px solid ${grayMid}`,
-      hoverBorderColor: grayMain,
+      borderRight: `2px solid ${grayStrong}`,
+      hoverBorderColor: lightGrayDark,
       tableCellBorder: `1px solid ${grayLightMid}`,
 
       groupMenu: {
         background: white,
         borderBottom: "1px solid transparent",
-        borderRight: `1px solid ${grayMid}`,
-        boxShadow: "0px 5px 20px rgba(4, 15, 27, 7%)",
+        borderRight: `1px solid ${grayStrong}`,
+        boxShadow: `0px 5px 20px ${menuShadow}`,
       },
 
       header: {
         background: white,
         borderBottom: `1px solid ${grayLightMid}`,
         textColor: gray,
-        activeTextColor: grayMain,
-        hoverTextColor: grayMain,
+        activeTextColor: lightGrayDark,
+        hoverTextColor: lightGrayDark,
 
         iconColor: gray,
-        activeIconColor: grayMain,
-        hoverIconColor: grayMain,
+        activeIconColor: lightGrayDark,
+        hoverIconColor: lightGrayDark,
 
         borderImageSource: `linear-gradient(to right,${white} 21px,${grayLightMid} 21px,${grayLightMid} calc(100% - 20px),${white} calc(100% - 20px))`,
         borderHoverImageSource: `linear-gradient(to right,${white} 0px,${grayLightMid} 0px,${grayLightMid} 100% ,${white} 100%)`,
 
         lengthenBorderImageSource: `linear-gradient(to right, ${grayLightMid}, ${grayLightMid})`,
-        hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`,
+        hotkeyBorderBottom: `1px solid ${lightSecondMain}`,
 
-        settingsIconDisableColor: "#D0D5DA",
+        settingsIconDisableColor: grayStrong,
       },
 
       tableCell: {
@@ -2270,23 +2033,23 @@ export const getBaseTheme = () => {
 
     filesSection: {
       rowView: {
-        checkedBackground: "#f3f4f4",
+        checkedBackground: lightGrayHover,
 
-        draggingBackground: lightCumulus,
-        draggingHoverBackground: lightMediumGoldenrod,
+        draggingBackground: dndColor,
+        draggingHoverBackground: dndHoverColor,
 
         shareButton: {
-          color: grayMain,
-          fill: grayMain,
+          color: lightGrayDark,
+          fill: lightGrayDark,
         },
 
         sideColor: gray,
         linkColor: black,
         textColor: gray,
 
-        editingIconColor: "#3b72a7",
-        shareHoverColor: "#3b72a7",
-        pinColor: "#3b72a7",
+        editingIconColor: lightIcons,
+        shareHoverColor: lightIcons,
+        pinColor: lightIcons,
       },
 
       tableView: {
@@ -2296,40 +2059,41 @@ export const getBaseTheme = () => {
         },
 
         row: {
-          checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`,
-          checkboxDragging: `linear-gradient(to right, ${lightCumulus} 24px, ${grayLightMid} 24px)`,
-          checkboxDraggingHover: `linear-gradient(to right,rgb(239, 239, 178) 24px, ${grayLightMid} 24px)`,
+          checkboxChecked: `linear-gradient(to right, ${lightGrayHover} 24px, ${grayLightMid} 24px)`,
+          checkboxDragging: `linear-gradient(to right, ${dndColor} 24px, ${grayLightMid} 24px)`,
+          checkboxDraggingHover: `linear-gradient(to right, ${dndHoverColor} 24px, ${grayLightMid} 24px)`,
 
-          contextMenuWrapperChecked: `linear-gradient(to left, #f3f4f4 24px, ${grayLightMid} 24px)`,
-          contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${lightCumulus} 24px, ${grayLightMid} 24px)`,
-          contextMenuWrapperDraggingHover: `linear-gradient(to left,rgb(239, 239, 178) 24px,${grayLightMid} 24px)`,
+          contextMenuWrapperChecked: `linear-gradient(to left, ${lightGrayHover} 24px, ${grayLightMid} 24px)`,
+          contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndColor} 24px, ${grayLightMid} 24px)`,
+          contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndHoverColor} 24px,${grayLightMid} 24px)`,
 
-          backgroundActive: `#F3F4F4`,
+          backgroundActive: lightGrayHover,
 
           borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`,
           borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
 
           borderHover: gray,
           sideColor: gray,
-          shareHoverColor: "#3b72a7",
+          shareHoverColor: lightIcons,
 
-          borderImageRight:
-            "linear-gradient(to right, #ffffff 25px,#eceef1 24px)",
-          borderImageLeft:
-            "linear-gradient(to left, #ffffff 24px,#eceef1 24px)",
+          borderImageRight: `linear-gradient(to right, ${white} 25px, ${grayLightMid} 24px)`,
+          borderImageLeft: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
 
-          borderColor: "#ECEEf1",
-          borderColorTransition: "#f3f4f4",
+          borderColor: grayLightMid,
+          borderColorTransition: lightGrayHover,
+
+          color: black,
+          backgroundGroup: grayLightMid,
         },
       },
 
       tilesView: {
         tile: {
-          draggingColor: lightCumulus,
-          draggingHoverColor: lightMediumGoldenrod,
-          checkedColor: "#f3f4f4",
-          roomsCheckedColor: "#f3f4f4",
-          border: `1px solid ${grayMid}`,
+          draggingColor: dndColor,
+          draggingHoverColor: dndHoverColor,
+          checkedColor: lightGrayHover,
+          roomsCheckedColor: lightGrayHover,
+          border: `1px solid ${grayStrong}`,
           backgroundBadgeColor: white,
           backgroundColor: white,
           borderRadius: "6px",
@@ -2346,7 +2110,7 @@ export const getBaseTheme = () => {
         textColor: gray,
       },
 
-      animationColor: "rgba(82, 153, 224, 0.16)",
+      animationColor: lightSecondMain,
     },
 
     advancedSelector: {
@@ -2357,8 +2121,8 @@ export const getBaseTheme = () => {
       borderLeft: `1px solid ${grayLightMid}`,
 
       searcher: {
-        hoverBorderColor: grayMid,
-        focusBorderColor: blueMain,
+        hoverBorderColor: grayStrong,
+        focusBorderColor: lightSecondMain,
         placeholderColor: gray,
       },
     },
@@ -2367,40 +2131,40 @@ export const getBaseTheme = () => {
       border: `1px solid ${grayLightMid}`,
 
       breadCrumbs: {
-        prevItemColor: "#657077",
-        arrowRightColor: "#657077",
+        prevItemColor: lightGrayDark,
+        arrowRightColor: lightGrayDark,
       },
 
       info: {
-        backgroundColor: "#f8f9f9",
-        color: "#555f65",
+        backgroundColor: grayLight,
+        color: grayText,
       },
 
-      bodyDescriptionText: "#A3A9AE",
+      bodyDescriptionText: gray,
 
       item: {
         hoverBackground: grayLight,
-        selectedBackground: lightHover,
+        selectedBackground: lightGrayHover,
 
-        inputButtonBorder: "#D0D5DA",
-        inputButtonBorderHover: grayMain,
+        inputButtonBorder: grayStrong,
+        inputButtonBorderHover: lightGrayDark,
 
-        disableTextColor: "#A3A9AE",
+        disableTextColor: gray,
       },
 
       emptyScreen: {
-        descriptionColor: cyanBlueDarkShade,
+        descriptionColor: grayText,
 
-        buttonColor: "#657077",
-        hoverButtonColor: "#333333",
-        pressedButtonColor: "#555F65",
+        buttonColor: lightGrayDark,
+        hoverButtonColor: black,
+        pressedButtonColor: grayText,
       },
     },
 
     floatingButton: {
-      backgroundColor: "#3B72A7",
+      backgroundColor: lightIcons,
       color: white,
-      boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
+      boxShadow: `0px 5px 20px ${popupShadow}`,
       fill: white,
 
       alert: {
@@ -2410,171 +2174,169 @@ export const getBaseTheme = () => {
     },
 
     mediaViewer: {
-      color: "#d1d1d1",
-      background: "rgba(17, 17, 17, 0.867)",
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
+      color: grayStrong,
+      backgroundColor: highlandGray,
       fill: white,
       titleColor: white,
       iconColor: white,
 
       controlBtn: {
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: silver,
       },
 
       imageViewer: {
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
-        inactiveBackgroundColor: "rgba(11,11,11,0.7)",
+        backgroundColor: silver,
+        inactiveBackgroundColor: highlandGray,
         fill: white,
       },
 
       progressBar: {
-        background: "#d1d1d1",
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
+        background: grayStrong,
+        backgroundColor: silver,
       },
 
       scrollButton: {
-        backgroundColor: "rgba(11, 11, 11, 0.7)",
-        background: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: highlandGray,
+        background: silver,
         border: `solid ${white}`,
       },
 
       videoViewer: {
         fill: white,
         stroke: white,
-        color: "#d1d1d1",
+        color: grayStrong,
         colorError: white,
         backgroundColorError: darkBlack,
-        backgroundColor: "rgba(11, 11, 11, 0.7)",
-        background: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: highlandGray,
+        background: silver,
       },
     },
 
-    connectCloud: {
-      connectBtnContent: black,
-      connectBtnTextBg: white,
-      connectBtnIconBg: white,
-      connectBtnTextBorder: grayMid,
-      connectBtnIconBorder: grayMid,
-    },
-
     createEditRoomDialog: {
       commonParam: {
-        descriptionColor: "#a3a9ae",
-        textColor: "#657077",
+        descriptionColor: gray,
+        textColor: lightGrayDark,
       },
 
       roomType: {
         listItem: {
           background: "none",
-          hoverBackground: "#F8F9F9",
-          borderColor: "#ECEEF1",
-          descriptionText: "#A3A9AE",
+          hoverBackground: grayLight,
+          borderColor: grayLightMid,
+          descriptionText: gray,
         },
         dropdownButton: {
           background: "none",
-          hoverBackground: "#F8F9F9",
-          borderColor: "#ECEEF1",
-          isOpenBorderColor: "#2DA7DB",
-          descriptionText: "#A3A9AE",
+          hoverBackground: grayLight,
+          borderColor: grayLightMid,
+          descriptionText: gray,
         },
         dropdownItem: {
-          background: "#ffffff",
-          hoverBackground: "#F8F9F9",
-          descriptionText: "#A3A9AE",
+          background: white,
+          hoverBackground: grayLight,
+          descriptionText: gray,
         },
         displayItem: {
-          background: "#f8f8f8",
-          borderColor: "#f8f8f8",
-          descriptionText: "#555F65",
+          background: grayLight,
+          borderColor: grayLight,
+          descriptionText: grayText,
         },
       },
 
       roomTypeDropdown: {
         desktop: {
-          background: "#ffffff",
-          borderColor: "#d0d5da",
+          background: white,
+          borderColor: grayStrong,
         },
         mobile: {
-          background: "#ffffff",
+          background: white,
         },
       },
 
       permanentSettings: {
-        background: "#f8f9f9",
-        isPrivateIcon: "#35ad17",
-        descriptionColor: "#555f65",
+        background: grayLight,
+        isPrivateIcon: lightStatusPositive,
+        descriptionColor: grayText,
       },
 
       dropdown: {
-        background: "#ffffff",
-        borderColor: "#d0d5da",
+        background: white,
+        borderColor: grayStrong,
         item: {
-          hoverBackground: "#f3f4f4",
+          hoverBackground: lightGrayHover,
         },
       },
 
       isPrivate: {
         limitations: {
-          background: "#f8f9f9",
-          iconColor: "#ed7309",
-          titleColor: "#ed7309",
-          descriptionColor: "#555f65",
-          linkColor: "#555f65",
+          background: grayLight,
+          iconColor: lightStatusWarning,
+          titleColor: lightStatusWarning,
+          descriptionColor: grayText,
+          linkColor: grayText,
         },
       },
 
       thirdpartyStorage: {
         combobox: {
-          background: "#ffffff",
-          dropdownBorderColor: "#d0d5da",
-          hoverDropdownBorderColor: "#a3a9ae",
-          isOpenDropdownBorderColor: "#2DA7DB",
-          arrowFill: "#a3a9ae",
+          background: white,
+          dropdownBorderColor: grayStrong,
+          hoverDropdownBorderColor: gray,
+          isOpenDropdownBorderColor: lightSecondMain,
+          arrowFill: gray,
         },
         folderInput: {
-          background: "#ffffff",
-          borderColor: "#d0d5da",
-          hoverBorderColor: "#a3a9ae",
-          focusBorderColor: "#35abd8",
-          rootLabelColor: "#a3a9ae",
-          iconFill: "#657177",
+          background: white,
+          borderColor: grayStrong,
+          hoverBorderColor: gray,
+          rootLabelColor: gray,
+          iconFill: lightGrayDark,
         },
       },
 
       iconCropper: {
-        gridColor: "#333333",
+        gridColor: black,
         deleteButton: {
-          background: "#f8f9f9",
-          hoverBackground: "#f3f4f4",
-          borderColor: "#f8f9f9",
-          hoverBorderColor: "#f3f4f4",
-          color: "#555f65",
-          iconColor: "#657077",
+          background: grayLight,
+          hoverBackground: lightGrayHover,
+          borderColor: grayLight,
+          hoverBorderColor: lightGrayHover,
+          color: grayText,
+          iconColor: lightGrayDark,
         },
       },
 
       previewTile: {
-        background: "#ffffff",
-        borderColor: "#d0d5da",
-        iconBorderColor: "#eceef1",
+        background: white,
+        borderColor: grayStrong,
+        iconBorderColor: grayLightMid,
       },
 
       dropzone: {
-        borderColor: "#eceef1",
-        linkMainColor: "#316daa",
-        linkSecondaryColor: "#333333",
-        exstsColor: "#a3a9ae",
+        borderColor: grayLightMid,
+        linkMainColor: link,
+        linkSecondaryColor: black,
+        exstsColor: gray,
+      },
+      helpButton: {
+        background: gray,
+        fill: white,
       },
     },
 
+    createEditGroupDialog: {
+      textColor: gray,
+      iconFill: gray,
+    },
+
     filesThirdPartyDialog: {
-      border: "1px solid #d1d1d1",
+      border: `1px solid ${grayStrong}`,
     },
 
     connectedClouds: {
-      color: "#657077",
-      borderBottom: `1px solid #eceef1`,
-      borderRight: `1px solid #d0d5da`,
+      color: lightGrayDark,
+      borderBottom: `1px solid ${grayLightMid}`,
+      borderRight: `1px solid ${grayStrong}`,
     },
 
     filesModalDialog: {
@@ -2583,35 +2345,36 @@ export const getBaseTheme = () => {
 
     filesDragTooltip: {
       background: white,
-      boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
+      boxShadow: `0px 5px 20px ${popupShadow}`,
       color: gray,
     },
 
     filesEmptyContainer: {
-      linkColor: cyanBlueDarkShade,
+      linkColor: grayText,
       privateRoom: {
-        linkColor: "#116d9d",
+        linkColor: link,
       },
+      descriptionColor: lightGrayDark,
     },
 
     emptyContent: {
       header: {
-        color: "#333333",
+        color: black,
       },
 
       description: {
-        color: cyanBlueDarkShade,
+        color: grayText,
       },
       button: {
-        colorLink: "#657077",
-        colorText: "#555F65",
+        colorLink: lightGrayDark,
+        colorText: grayText,
       },
     },
 
     emptyView: {
       items: {
         hoverColor: grayLight,
-        pressColor: lightGrayishStrongBlue,
+        pressColor: lightGraySelected,
       },
     },
 
@@ -2630,6 +2393,7 @@ export const getBaseTheme = () => {
       addUsers: {
         iconColor: gray,
         arrowColor: darkBlack,
+        textColor: gray,
       },
 
       changeOwner: {
@@ -2638,9 +2402,12 @@ export const getBaseTheme = () => {
       },
 
       embedding: {
-        textAreaColor: "#AEAEAE",
+        textAreaColor: gray,
         iconColor: black,
         color: gray,
+        border: `1px solid ${grayDarkMid}`,
+        linkBackground: blueLightMid,
+        linkColor: white,
       },
 
       versionHistory: {
@@ -2650,7 +2417,7 @@ export const getBaseTheme = () => {
       content: {
         backgroundColor: white,
         fill: gray,
-        disabledFill: grayMid,
+        disabledFill: grayStrong,
       },
 
       body: {
@@ -2666,22 +2433,13 @@ export const getBaseTheme = () => {
       linkRow: {
         backgroundColor: grayLight,
         fill: gray,
-        disabledFill: grayMid,
+        disabledFill: grayStrong,
       },
 
       selectFolder: {
         color: gray,
       },
 
-      selectFile: {
-        color: gray,
-        background: grayLight,
-        borderBottom: `1px solid ${grayLightMid}`,
-        borderRight: `1px solid ${globalColors.lightGrayishBlue}`,
-
-        buttonsBackground: white,
-      },
-
       filesList: {
         color: gray,
         backgroundColor: grayLightMid,
@@ -2691,26 +2449,26 @@ export const getBaseTheme = () => {
       modalRow: {
         backgroundColor: grayLightMid,
         fill: gray,
-        disabledFill: grayMid,
+        disabledFill: grayStrong,
       },
 
       sharing: {
         color: gray,
         fill: gray,
-        loadingFill: grayMid,
+        loadingFill: grayStrong,
 
-        borderBottom: "1px solid #eceef1",
-        borderTop: "1px solid #eceef1",
-        externalLinkBackground: "#f8f9f9",
-        externalLinkSvg: "#333333",
+        borderBottom: `1px solid ${grayLightMid}`,
+        borderTop: `1px solid ${grayLightMid}`,
+        externalLinkBackground: grayLight,
+        externalLinkSvg: black,
 
-        internalLinkBorder: "1px dashed #333333",
+        internalLinkBorder: `1px dashed ${black}`,
 
-        itemBorder: "1px dashed #333333",
+        itemBorder: `1px dashed ${black}`,
 
-        itemOwnerColor: "rgb(163, 169, 174)",
+        itemOwnerColor: gray,
 
-        backgroundButtons: "#FFFFFF",
+        backgroundButtons: white,
 
         dropdownColor: black,
 
@@ -2722,19 +2480,24 @@ export const getBaseTheme = () => {
 
       upload: {
         color: gray,
-        tooltipColor: lightCumulus,
+        tooltipColor: lightToastInfo,
         iconColor: lightErrorStatus,
 
         shareButton: {
           color: gray,
-          sharedColor: grayMain,
+          sharedColor: lightGrayDark,
         },
 
         loadingButton: {
-          color: blueMain,
+          color: lightSecondMain,
           background: white,
         },
       },
+      invite: {
+        textColor: gray,
+        addButtonColor: lightBlueMain,
+        border: `1px solid ${grayStrong}`,
+      },
     },
 
     menuItem: {
@@ -2788,7 +2551,7 @@ export const getBaseTheme = () => {
       background: white,
       borderRadius: "6px",
       mobileBorderRadius: "6px 6px 0 0",
-      boxShadow: "0px 8px 16px 0px #040F1B14",
+      boxShadow: `0px 8px 16px 0px ${boxShadowColor}`,
       padding: "6px 0px",
       border: "none",
       devices: {
@@ -2802,14 +2565,14 @@ export const getBaseTheme = () => {
       },
     },
     filesSettings: {
-      color: cyanBlueDarkShade,
+      color: grayText,
 
       linkColor: black,
     },
 
     filesBadges: {
       iconColor: gray,
-      hoverIconColor: "#3B72A7",
+      hoverIconColor: lightIcons,
 
       color: white,
       backgroundColor: white,
@@ -2818,16 +2581,21 @@ export const getBaseTheme = () => {
       badgeBackgroundColor: gray,
     },
 
+    accountsBadges: {
+      pendingColor: gray,
+      disabledColor: lightErrorStatus,
+    },
+
     filesEditingWrapper: {
       color: black,
-      border: `1px solid ${grayMid}`,
+      border: `1px solid ${grayStrong}`,
       borderBottom: `1px solid ${grayLightMid}`,
 
       tile: {
-        background: globalColors.lightHover,
+        background: globalColors.lightGrayHover,
         itemBackground: white,
-        itemBorder: grayMid,
-        itemActiveBorder: blueMain,
+        itemBorder: grayStrong,
+        itemActiveBorder: lightSecondMain,
       },
 
       row: {
@@ -2835,29 +2603,30 @@ export const getBaseTheme = () => {
       },
 
       fill: gray,
-      hoverFill: grayMain,
+      hoverFill: lightGrayDark,
+      disabledBackground: white,
     },
 
     filesIcons: {
-      fill: "#3b72a7",
-      hoverFill: "#3b72a7",
+      fill: lightIcons,
+      hoverFill: lightIcons,
     },
 
     filesQuickButtons: {
       color: gray,
-      sharedColor: "#3b72a7",
-      hoverColor: "#3b72a7",
+      sharedColor: lightIcons,
+      hoverColor: lightIcons,
     },
 
     filesSharedButton: {
       color: gray,
-      sharedColor: grayMain,
+      sharedColor: lightGrayDark,
     },
 
     filesPrivateRoom: {
-      borderBottom: "1px solid #d3d3d3",
-      linkColor: "#116d9d",
-      textColor: "#83888D",
+      borderBottom: `1px solid ${grayLightMid}`,
+      linkColor: link,
+      textColor: grayText,
     },
 
     filesVersionHistory: {
@@ -2871,24 +2640,25 @@ export const getBaseTheme = () => {
         stroke: gray,
         fill: gray,
         defaultFill: white,
-        badgeFill: orangeMain,
+        badgeFill: lightStatusWarning,
       },
 
       versionList: {
-        fill: grayMid,
-        stroke: grayMid,
-        color: grayMid,
+        fill: grayStrong,
+        stroke: grayStrong,
+        color: grayStrong,
       },
+      commentColor: gray,
     },
 
     login: {
       linkColor: link,
       textColor: gray,
-      navBackground: "#F8F9F9",
+      navBackground: grayLight,
       headerColor: black,
-      helpButton: "#A3A9AE",
-      orLineColor: "#ECEEF1",
-      orTextColor: "#A3A9AE",
+      helpButton: gray,
+      orLineColor: grayLightMid,
+      orTextColor: gray,
       titleColor: black,
 
       register: {
@@ -2906,23 +2676,17 @@ export const getBaseTheme = () => {
       },
 
       backTitle: {
-        color: "#A3A9AE",
+        color: gray,
       },
     },
 
-    facebookButton: {
-      background: white,
-      border: "1px solid #1877f2",
-      color: "#1877f2",
-    },
-
     peopleSelector: {
       textColor: gray,
     },
 
     peopleWithContent: {
       color: gray,
-      pendingColor: grayMid,
+      pendingColor: grayStrong,
     },
 
     peopleDialogs: {
@@ -2931,7 +2695,7 @@ export const getBaseTheme = () => {
       },
 
       deleteUser: {
-        textColor: red,
+        textColor: lightErrorStatus,
       },
 
       deleteSelf: {
@@ -2944,18 +2708,20 @@ export const getBaseTheme = () => {
     },
 
     downloadDialog: {
-      background: "#f8f9f9",
+      background: grayLight,
+      textColor: gray,
+      iconFill: black,
     },
 
     client: {
       about: {
-        linkColor: blueMain,
-        border: "1px solid lightgray",
+        linkColor: lightSecondMain,
+        border: `1px solid ${gray}`,
         logoColor: black,
       },
 
       comingSoon: {
-        linkColor: cyanBlueDarkShade,
+        linkColor: grayText,
         linkIconColor: black,
         backgroundColor: white,
         foregroundColor: white,
@@ -2963,39 +2729,31 @@ export const getBaseTheme = () => {
 
       confirm: {
         activateUser: {
-          textColor: "#116d9d",
-          textColorError: red,
+          textColor: link,
+          textColorError: lightErrorStatus,
         },
         change: {
-          titleColor: "#116d9d",
+          titleColor: link,
         },
       },
 
       home: {
         logoColor: black,
-        textColorError: red,
+        textColorError: lightErrorStatus,
       },
 
       payments: {
         linkColor: link,
-        delayColor: "#F21C0E",
-      },
-
-      paymentsEnterprise: {
-        background: grayLight,
-
-        buttonBackground: "#edf2f7",
-
-        linkColor: link,
-        headerColor: orangePressed,
+        delayColor: lightErrorStatus,
       },
 
       settings: {
         iconFill: black,
-        headerTitleColor: "#333333",
-        trashIcon: "#A3A9AE",
+        headerTitleColor: black,
+        descriptionColor: grayText,
+        trashIcon: gray,
         article: {
-          titleColor: grayMain,
+          titleColor: lightGrayDark,
           fillIcon: "dimgray",
           expanderColor: "dimgray",
         },
@@ -3004,39 +2762,48 @@ export const getBaseTheme = () => {
 
         security: {
           arrowFill: black,
-          descriptionColor: cyanBlueDarkShade,
+          descriptionColor: grayText,
+
+          tfa: {
+            textColor: gray,
+          },
 
           admins: {
             backgroundColor: black,
-            backgroundColorWrapper: blueMain,
-            roleColor: grayMid,
+            backgroundColorWrapper: lightSecondMain,
+            roleColor: grayStrong,
 
             color: link,
             departmentColor: gray,
 
-            tooltipColor: lightCumulus,
+            tooltipColor: lightToastInfo,
 
             nameColor: black,
             pendingNameColor: gray,
 
             textColor: white,
-            iconColor: blueMain,
+            iconColor: lightSecondMain,
           },
 
           owner: {
             backgroundColor: grayLight,
             linkColor: link,
             departmentColor: gray,
-            tooltipColor: lightCumulus,
+            tooltipColor: lightToastInfo,
           },
           auditTrail: {
-            sideColor: "#A3A9AE",
-            nameColor: "#333333",
+            sideColor: gray,
+            nameColor: black,
             downloadReportDescriptionColor: gray,
           },
           loginHistory: {
-            sideColor: "#A3A9AE",
-            nameColor: "#333333",
+            sideColor: gray,
+            nameColor: black,
+            textColor: gray,
+            subheaderColor: lightGrayDark,
+          },
+          ip: {
+            errorColor: lightErrorStatus,
           },
         },
 
@@ -3045,233 +2812,277 @@ export const getBaseTheme = () => {
           linkColorHelp: link,
           tooltipLinkColor: black,
           arrowColor: black,
-          descriptionColor: grayMain,
-          brandingDescriptionColor: "#657077",
+          descriptionColor: lightGrayDark,
+          brandingDescriptionColor: lightGrayDark,
+
+          appearance: {
+            themeAddBackground: grayLightMid,
+            accentBoxBackground: grayLightMid,
+            buttonBoxBackground: grayLightMid,
+            iconFill: gray,
+            addThemeBackground: grayStrong,
+          },
 
           whiteLabel: {
-            borderImg: "1px solid #d1d1d1",
+            borderImg: `1px solid ${grayStrong}`,
 
             backgroundColorWhite: white,
-            backgroundColorLight: "#F8F9F9",
-            backgroundColorDark: "#282828",
-            greenBackgroundColor: "#40865C",
-            blueBackgroundColor: "#446995",
-            orangeBackgroundColor: "#BE6650",
-            redBackgroundColor: "#AA5251",
+            backgroundColorLight: grayLight,
+            backgroundColorDark: darkGrayLight,
+            greenBackgroundColor: editorGreenColor,
+            blueBackgroundColor: editorBlueColor,
+            orangeBackgroundColor: editorOrangeColor,
+            redBackgroundColor: editorRedColor,
 
             dataFontColor: white,
             dataFontColorBlack: black,
           },
+
+          companyInfo: {
+            border: `1px dashed ${black}`,
+            color: gray,
+          },
+
+          dns: {
+            errorColor: lightErrorStatus,
+          },
         },
 
         integration: {
-          separatorBorder: `1px solid ${grayMid}`,
+          separatorBorder: `1px solid ${grayStrong}`,
           linkColor: link,
-
+          textColor: gray,
           sso: {
+            textColor: gray,
             toggleContentBackground: grayLight,
             iconButton: black,
             iconButtonDisabled: gray,
-            border: "1px solid #eceef1",
+            border: `1px solid ${grayStrong}`,
+          },
+          ldap: {
+            border: `1px solid ${grayLightMid}`,
+            errorBorder: `1px solid ${lightErrorStatus}`,
+            certificateBackground: grayLight,
+            textColor: gray,
+            errorColor: lightErrorStatus,
           },
-
           smtp: {
-            requirementColor: "#F21C0E",
+            requirementColor: lightErrorStatus,
           },
         },
 
         backup: {
-          rectangleBackgroundColor: "#f8f9f9",
-          separatorBorder: "1px solid #eceef1",
-          warningColor: "#f21c0e",
-          textColor: "#A3A9AE",
-          backupCheckedListItemBackground: "#F3F4F4",
+          rectangleBackgroundColor: grayLight,
+          separatorBorder: `1px solid ${grayLightMid}`,
+          warningColor: lightErrorStatus,
+          textColor: gray,
+          backupCheckedListItemBackground: lightGrayHover,
         },
 
         payment: {
-          priceColor: "#555F65",
-          storageSizeTitle: "#A3A9AE",
+          priceColor: grayText,
+          storageSizeTitle: gray,
 
-          backgroundColor: "#f8f9f9",
-          linkColor: "#316DAA",
-          tariffText: "#555F65",
-          border: "1px solid #f8f9f9",
-          backgroundBenefitsColor: "#f8f9f9",
-          rectangleColor: "#f3f4f4",
+          backgroundColor: grayLight,
+          linkColor: link,
+          tariffText: grayText,
+          border: `1px solid ${grayLight}`,
+          backgroundBenefitsColor: grayLight,
+          rectangleColor: lightGrayHover,
 
           priceContainer: {
-            backgroundText: "#f3f4f4",
+            backgroundText: lightGrayHover,
             background: "transparent",
-            border: "1px solid #d0d5da",
-            featureTextColor: "#A3A9AE",
+            border: `1px solid ${grayStrong}`,
+            featureTextColor: gray,
 
-            disableColor: "#A3A9AE",
-            trackNumberColor: "#A3A9AE",
-            disablePriceColor: "#A3A9AE",
+            disableColor: gray,
+            trackNumberColor: gray,
+            disablePriceColor: gray,
           },
 
           benefitsContainer: {
-            iconsColor: "#657077",
+            iconsColor: lightGrayDark,
           },
 
           contactContainer: {
-            textColor: "#A3A9AE",
-            linkColor: "#657077",
+            textColor: gray,
+            linkColor: lightGrayDark,
           },
 
-          warningColor: "#F21C0E",
-          color: "#F97A0B",
+          warningColor: lightErrorStatus,
+          color: lightStatusWarning,
         },
 
         migration: {
-          descriptionColor: grayMain,
-          subtitleColor: "#333333",
-          workspaceBackground: "#FFFFFF",
-          workspaceBorder: "1px solid #d0d5da",
-          stepDescriptionColor: "#333333",
-          fileInputIconColor: "#A3A9AE",
-          infoBlockBackground: "#f8f9f9",
-          infoBlockTextColor: "#555F65",
-          errorTextColor: "#F21C0E",
-          existingTextColor: "#2db482",
-          tableHeaderText: "#A3A9AE",
-          tableRowHoverColor: "#F3F4F4",
-          tableRowTextColor: "#A3A9AE",
-          comboBoxLabelColor: "#333333",
-          importSectionBackground: "#F8F9F9",
-          importSectionTextColor: "#A3A9AE",
-          importItemBackground: "#eceef1",
-          importItemDisableBackground: "#F3F4F4",
-          importItemTextColor: "#555f65",
-          importItemDisableTextColor: "#A3A9AE",
-          importItemDescription: "#333333",
-          importIconColor: "#657077",
-          groupMenuBackground: "#fff",
-          groupMenuBorder: "1px solid #fff",
-          groupMenuBoxShadow: "rgba(4, 15, 27, 0.07) 0px 5px 5px 0px",
+          descriptionColor: lightGrayDark,
+          subtitleColor: black,
+          workspaceBackground: white,
+          workspaceBorder: `1px solid ${grayStrong}`,
+          workspaceHover: lightBlueMain,
+          stepDescriptionColor: black,
+          fileInputIconColor: gray,
+          infoBlockBackground: grayLight,
+          infoBlockTextColor: grayText,
+          errorTextColor: lightErrorStatus,
+          existingTextColor: mainGreen,
+          tableHeaderText: gray,
+          tableRowHoverColor: lightGrayHover,
+          tableRowTextColor: gray,
+          comboBoxLabelColor: black,
+          importSectionBackground: grayLight,
+          importSectionTextColor: gray,
+          importItemBackground: grayLightMid,
+          importItemDisableBackground: lightGrayHover,
+          importItemTextColor: grayText,
+          importItemDisableTextColor: gray,
+          importItemDescription: black,
+          importIconColor: lightGrayDark,
+          groupMenuBackground: white,
+          groupMenuBorder: `1px solid ${white}`,
+          groupMenuBoxShadow: `${menuShadow} 0px 5px 5px 0px`,
+          linkColor: lightBlueMain,
+          background: grayLight,
         },
         storageManagement: {
-          grayBackgroundText: "#555F65",
-          descriptionColor: "#657077",
+          grayBackgroundText: grayText,
+          descriptionColor: lightGrayDark,
+          dividerColor: grayLightMid,
+        },
+        deleteData: {
+          borderTop: `1px solid ${grayLightMid}`,
+        },
+        webhooks: {
+          border: `1px solid ${grayLightMid}`,
+          historyRowBackground: lightGrayHover,
+          tableCellBackground: lightGrayHover,
+          barBackground: grayLight,
+          color: gray,
+          linkColor: link,
+          spanBackground: lightBlueMain,
+          filterBorder: `1px solid ${grayStrong}`,
+          toastBackground: lightToastWarning,
+          background: grayLight,
         },
       },
 
       wizard: {
-        linkColor: "#116d9d",
-        generatePasswordColor: "#657077",
+        linkColor: link,
+        generatePasswordColor: lightGrayDark,
+        textColor: gray,
       },
     },
 
-    campaignsBanner: {
-      border: "1px solid #d1d1d1",
-      color: darkBlack,
-
-      btnColor: white,
-      btnBackgroundActive: blueMain,
-    },
-
     tileLoader: {
-      border: `1px solid ${grayMid}`,
+      border: `1px solid ${grayStrong}`,
 
       background: white,
     },
 
     errorContainer: {
       background: white,
-      bodyText: "#A3A9AE",
+      bodyText: gray,
+      linkColor: link,
     },
 
     editor: {
-      color: "#555f65",
+      color: grayText,
       background: white,
     },
 
     tabs: {
       gradientColor: white,
-      lineColor: "#eceef1",
+      lineColor: grayLightMid,
 
-      textColorPrimary: "#657077",
+      textColorPrimary: lightGrayDark,
       activeTextColorPrimary: "",
-      hoverTextColorPrimary: "#A3A9AE",
-      pressedTextColorPrimary: "#555F65",
+      hoverTextColorPrimary: gray,
+      pressedTextColorPrimary: grayText,
       backgroundColorPrimary: white,
 
-      textColorSecondary: "#333333",
+      textColorSecondary: black,
       activeTextColorSecondary: white,
 
       backgroundColorSecondary: white,
-      hoverBackgroundColorSecondary: "#F3F4F4",
-      pressedBackgroundColorSecondary: "#ECEEF1",
-      activeBackgroundColorSecondary: "#265A8F",
+      hoverBackgroundColorSecondary: lightGrayHover,
+      pressedBackgroundColorSecondary: grayLightMid,
+      activeBackgroundColorSecondary: blueLightMid,
     },
 
     hotkeys: {
       key: {
-        color: grayMain,
+        color: lightGrayDark,
       },
     },
 
     tag: {
       color: black,
-      deletedColor: "#A3A9AE",
-      background: "#f3f4f4",
-      hoverBackground: "#eceef1",
-      disabledBackground: "#f8f9f9",
-      deletedBackground: "#F8F9F9",
+      deletedColor: gray,
+      background: lightGrayHover,
+      hoverBackground: grayLightMid,
+      disabledBackground: grayLight,
+      deletedBackground: grayLight,
       defaultTagColor: black,
-      newTagBackground: "#eceef1",
-      newTagHoverBackground: "#F3F4F4",
+      newTagBackground: grayLightMid,
+      newTagHoverBackground: lightGrayHover,
     },
 
     profile: {
       main: {
-        background: "#F8F9F9",
+        background: grayLight,
         textColor: black,
 
-        descriptionTextColor: "#A3A9AE",
-        pendingEmailTextColor: "#A3A9AE",
+        descriptionTextColor: gray,
+        pendingEmailTextColor: gray,
 
-        mobileRowBackground: "#F8F9F9",
+        mobileRowBackground: grayLight,
+
+        iconFill: lightGrayDark,
+        mobileLabel: gray,
+      },
+      login: {
+        textColor: gray,
       },
       themePreview: {
-        descriptionColor: "#A3A9AE",
-        border: "1px solid #eceef1",
+        descriptionColor: gray,
+        border: `1px solid ${grayLightMid}`,
       },
       notifications: {
-        textDescriptionColor: "#A3A9AE",
+        textDescriptionColor: gray,
       },
       activeSessions: {
-        color: "#333",
-        borderColor: "#eceef1",
-        tickIconColor: "#35AD17",
-        removeIconColor: "#A3A9AE",
-        sortHeaderColor: "#d0d5da",
-        tableCellColor: "#a3a9ae",
-        dividerColor: "#D0D5DA",
+        color: black,
+        borderColor: grayLightMid,
+        tickIconColor: lightStatusPositive,
+        removeIconColor: gray,
+        sortHeaderColor: grayStrong,
+        tableCellColor: gray,
+        dividerColor: grayStrong,
       },
     },
 
     formWrapper: {
       background: white,
-      boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.07)",
+      boxShadow: `0px 5px 20px ${popupShadow}`,
     },
 
     preparationPortalProgress: {
-      backgroundColor: "#F3F4F4",
-      colorPercentSmall: "#333333",
-      colorPercentBig: "#FFFFFF",
-      errorTextColor: "#F21C0E",
-      descriptionTextColor: "#A3A9AE",
+      backgroundColor: lightGrayHover,
+      colorPercentSmall: black,
+      colorPercentBig: white,
+      errorTextColor: lightErrorStatus,
+      descriptionTextColor: gray,
     },
 
     codeInput: {
       background: white,
-      border: "1px solid #d0d5da",
+      border: `1px solid ${grayStrong}`,
       color: black,
-      lineColor: "#C4C4C4",
-      disabledBackground: "#F8F9F9",
-      disabledBorder: "1px solid #ECEEF1",
-      disabledColor: "#A3A9AE",
+      lineColor: grayStrong,
+      disabledBackground: grayLight,
+      disabledBorder: `1px solid ${grayLightMid}`,
+      disabledColor: gray,
+      focusBorder: `1px solid ${lightSecondMain}`,
     },
 
     accessRightSelect: {
@@ -3283,88 +3094,97 @@ export const getBaseTheme = () => {
     },
 
     invitePage: {
-      borderColor: "#eceef1",
+      borderColor: grayLightMid,
+      textColor: gray,
     },
 
     portalUnavailable: {
-      textDescriptionColor: "#A3A9AE",
+      textDescriptionColor: gray,
     },
 
     deepLink: {
-      navBackground: "#f8f9f9",
-      fileTileBackground: "#f3f4f4",
+      navBackground: grayLight,
+      fileTileBackground: lightGrayHover,
     },
 
     emailChips: {
-      borderColor: "#A3A9AE",
-      dashedBorder: "1px dashed #5299E0",
+      borderColor: gray,
+      dashedBorder: `1px dashed ${lightSecondMain}`,
     },
 
     dialogs: {
-      disableText: "#A3A9AE",
+      disableText: gray,
+      errorText: lightErrorStatus,
+      linkColor: lightBlueMain,
+      borderColor: grayLightMid,
     },
 
     editLink: {
       text: {
-        color: "#A3A9AE",
-        errorColor: "#F21C0E",
+        color: gray,
+        errorColor: lightErrorStatus,
       },
+      requiredColor: lightErrorStatus,
     },
 
     oformGallery: {
       errorView: {
-        subHeaderTextColor: "#555F65",
+        subHeaderTextColor: grayText,
       },
       submitToGalleryTile: {
-        bodyText: "#555F65",
-        closeIconFill: "#657077",
+        bodyText: grayText,
+        closeIconFill: lightGrayDark,
       },
     },
 
     infoBlock: {
-      background: "#F8F9F9",
-      headerColor: "#333",
-      descriptionColor: "#555F65",
+      background: grayLight,
+      headerColor: black,
+      descriptionColor: grayText,
     },
 
     infoBar: {
-      background: "#f8f9f9",
+      background: grayLight,
       title: black,
-      description: cyanBlueDarkShade,
+      description: grayText,
+      textColor: black,
+      iconFill: lightStatusWarning,
     },
 
     roomIcon: {
-      backgroundArchive: "#A3A9AE",
+      backgroundArchive: gray,
       opacityBackground: "1",
     },
 
     plugins: {
-      borderColor: "#D0D5DA",
-      pluginName: "#5C5C5C",
-      descriptionColor: "#657077",
+      borderColor: grayStrong,
+      pluginName: grayDarkText,
+      descriptionColor: lightGrayDark,
+      color: grayDark,
     },
     oauth: {
       previewDialog: {
-        border: "1px solid #eceef1",
+        border: `1px solid ${grayLightMid}`,
       },
       infoDialog: {
-        descLinkColor: "#657077",
-        blockHeaderColor: "#a3a9ae",
-        separatorColor: "#333333",
+        descLinkColor: lightGrayDark,
+        blockHeaderColor: gray,
+        separatorColor: black,
       },
       list: {
-        descriptionColor: "#a3a9ae",
+        descriptionColor: gray,
       },
       clientForm: {
-        descriptionColor: "#a3a9ae",
-        headerBorder: "1px solid #d0d5da",
-        scopeDesc: "#a3a9ae",
+        descriptionColor: gray,
+        headerBorder: `1px solid ${grayStrong}`,
+        scopeDesc: gray,
       },
     },
     sdkPresets: {
-      borderColor: "#d0d5da",
-      secondaryColor: "#657077",
-      previewBackgroundColor: "#F3F4F4",
+      borderColor: grayStrong,
+      secondaryColor: lightGrayDark,
+      previewBackgroundColor: lightGrayHover,
+      linkHelpColor: lightGrayDark,
     },
     sideBarRow: {
       titleColor: black,
@@ -3372,24 +3192,35 @@ export const getBaseTheme = () => {
     },
 
     dateTimePicker: {
-      colorClockIcon: "#657077",
+      colorClockIcon: lightGrayDark,
     },
 
     embeddingPanel: {
-      descriptionTextColor: "#657077",
-      iconColor: "#657077",
+      descriptionTextColor: lightGrayDark,
+      iconColor: lightGrayDark,
     },
 
     completedForm: {
-      linkColor: "#4781D1",
-      descriptionColor: grayMain,
+      linkColor: lightBlueMain,
+      descriptionColor: gray,
 
-      labelColor: globalColors.grayMain,
+      labelColor: gray,
 
       box: {
         background: globalColors.grayLight,
       },
     },
+
+    management: {
+      textColor: gray,
+      errorColor: lightErrorStatus,
+      sideColor: gray,
+      nameColor: grayStrong,
+    },
+
+    publicRoom: {
+      border: `1px solid ${lightGraySelected}`,
+    },
   };
 };
 
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index 3123d2ed05..2a7fe92f3c 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -33,52 +33,99 @@ import { TTheme } from "./base";
 import { DEFAULT_FONT_FAMILY } from "../constants";
 
 const {
-  black,
   white,
-
-  grayLight,
-  grayLightMid,
-  grayMid,
-  grayDarkMid,
-  graySilver,
-  gray,
-  grayMain,
-  grayDark,
-  shuttleGrey,
-
-  blueMain,
-
-  orangePressed,
-
-  warningColor,
-  red,
-
-  grayMaxLight,
-  cyanBlueDarkShade,
-
+  black,
   darkBlack,
-  silver,
-  strongBlue,
 
-  darkRed,
+  lightGrayBlackout,
+  darkGrayBlackout,
+  grayLight,
+  darkGrayLight,
+  lightGrayHover,
+  lightDarkGrayHover,
+  grayLightMid,
+  grayDarkMid,
+  lightGraySelected,
+  grayStrong,
+  grayDarkStrong,
+  gray,
+  grayDark,
+  lightGrayDark,
+  darkGrayDark,
+  grayText,
+  grayDarkText,
+  lightBlueMain,
+  lightBlueMainHover,
+  lightBlueMainDisabled,
+  lightBlueMainPressed,
+  lightSecondMain,
+  lightSecondMainHover,
+  lightSecondMainDisabled,
 
+  mainOrange,
+
+  lightErrorStatus,
   darkErrorStatus,
-  charlestonGreen,
-  outerSpace,
+  favoritesStatus,
+  lightStatusWarning,
+  darkStatusWarning,
+  lightStatusPositive,
+  darkStatusPositive,
+
+  lightIcons,
+  darkIcon,
+  link,
+  darkLink,
+  blueLightMid,
+  bigGrayDarkMid,
+
+  lightToastDone,
+  darkToastDone,
+  lightToastInfo,
+  darkToastInfo,
+  lightToastAlert,
+  darkToastAlert,
+  lightToastWarning,
+  darkToastWarning,
+
+  dndColor,
+  dndDarkColor,
+  dndHoverColor,
+  dndDarkHover,
+
+  onWhiteColor,
+  boxShadowDarkColor,
+  loaderDark,
+
+  editorGreenColor,
+  editorBlueColor,
+  editorOrangeColor,
+  editorRedColor,
+  windowsColor,
+  linuxColor,
+  androidColor,
+  badgeShadow,
+  popupShadow,
+  menuShadow,
+  darkScroll,
+  darkScrollHover,
+  darkScrollActive,
+  silver,
+  highlandGray,
 } = globalColors;
 
 const Dark: TTheme = {
   ...CommonTheme,
   isBase: false,
-  color: grayMaxLight,
+  color: white,
   backgroundColor: black,
   fontFamily: DEFAULT_FONT_FAMILY,
   fontSize: "13px",
 
   text: {
-    color: grayMaxLight,
-    disableColor: "#5c5c5c",
-    emailColor: "#a3a9ae",
+    color: white,
+    disableColor: grayDarkText,
+    emailColor: gray,
     fontWeight: "normal",
     fontWeightBold: "bold",
   },
@@ -93,13 +140,13 @@ const Dark: TTheme = {
     },
 
     fontWeight: 600,
-    color: grayMaxLight,
+    color: white,
   },
 
-  backgroundAndSubstrateColor: "#282828",
+  backgroundAndSubstrateColor: darkGrayLight,
 
   betaBadgeTooltip: {
-    boxShadowColor: "rgba(0, 0, 0, 0.40)",
+    boxShadowColor: badgeShadow,
   },
 
   button: {
@@ -152,39 +199,39 @@ const Dark: TTheme = {
     },
 
     color: {
-      base: "#FFFFFF",
-      baseHover: "#FFFFFF",
-      baseActive: "#FFFFFF",
-      baseDisabled: "#474747",
+      base: white,
+      baseHover: white,
+      baseActive: white,
+      baseDisabled: grayDarkStrong,
 
-      primary: "#FFFFFF",
-      primaryHover: "#FFFFFF",
-      primaryActive: "#FFFFFF",
-      primaryDisabled: "#FFFFFF",
+      primary: white,
+      primaryHover: white,
+      primaryActive: white,
+      primaryDisabled: white,
     },
 
     backgroundColor: {
-      base: "#333333",
-      baseHover: "#333333",
-      baseActive: "#282828",
-      baseDisabled: "#282828",
+      base: black,
+      baseHover: black,
+      baseActive: darkGrayLight,
+      baseDisabled: darkGrayLight,
 
-      primary: "#5299E0",
-      primaryHover: "#4D8AC7",
-      primaryActive: "#427CB7",
-      primaryDisabled: "#45709B",
+      primary: lightSecondMain,
+      primaryHover: lightSecondMainHover,
+      primaryActive: `linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`,
+      primaryDisabled: lightSecondMainDisabled,
     },
 
     border: {
-      base: `1px solid #474747`,
-      baseHover: `1px solid #858585`,
-      baseActive: `1px solid #CCCCCC`,
-      baseDisabled: `1px solid #474747`,
+      base: `1px solid ${grayDarkStrong}`,
+      baseHover: `1px solid ${grayDark}`,
+      baseActive: `1px solid ${grayDarkStrong}`,
+      baseDisabled: `1px solid ${grayDarkStrong}`,
 
-      primary: `1px solid #5299E0`,
-      primaryHover: `1px solid #4D8AC7`,
-      primaryActive: `1px solid #427CB7`,
-      primaryDisabled: `1px solid #45709B`,
+      primary: `1px solid ${lightSecondMain}`,
+      primaryHover: `1px solid ${lightSecondMainHover}`,
+      primaryActive: `1px solid linear-gradient(0deg, ${lightSecondMain}, ${lightSecondMain}),linear-gradient(0deg, ${onWhiteColor}, ${onWhiteColor})`,
+      primaryDisabled: `1px solid ${lightSecondMainDisabled}`,
     },
 
     loader: {
@@ -200,35 +247,32 @@ const Dark: TTheme = {
     margin: "0",
     lineHeight: "56px",
     fontWeight: "700",
-    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
     padding: "0 16px 16px",
     bodyPadding: "16px 0",
   },
 
   mainButtonMobile: {
-    textColor: "rgba(255, 255, 255, 0.6)",
+    textColor: darkGrayDark,
 
-    buttonColor: "#F58D31",
+    buttonColor: mainOrange,
     iconFill: black,
 
     circleBackground: black,
 
-    mobileProgressBarBackground: "#606060",
+    mobileProgressBarBackground: grayDarkStrong,
 
     bar: {
-      errorBackground: orangePressed,
-
-      icon: "#858585",
+      icon: grayDark,
     },
 
     buttonWrapper: {
-      background: "#333333",
-      uploadingBackground: "#242424",
+      background: black,
+      uploadingBackground: grayDarkMid,
     },
 
     buttonOptions: {
-      backgroundColor: "#242424",
-      color: "#ff0000",
+      backgroundColor: grayDarkMid,
+      color: black,
     },
 
     dropDown: {
@@ -251,11 +295,11 @@ const Dark: TTheme = {
 
       separatorBackground: white,
 
-      buttonColor: grayMaxLight,
+      buttonColor: white,
 
       hoverButtonColor: black,
 
-      backgroundActionMobile: "rgba(255, 255, 255, 0.92)",
+      backgroundActionMobile: bigGrayDarkMid,
     },
 
     dropDownItem: {
@@ -264,10 +308,10 @@ const Dark: TTheme = {
   },
 
   mainButton: {
-    backgroundColor: "#4781D1",
-    disableBackgroundColor: "rgba(71, 129, 209, 0.6)",
-    hoverBackgroundColor: "rgba(71, 129, 209, .85)",
-    clickBackgroundColor: "#4074BC",
+    backgroundColor: lightBlueMain,
+    disableBackgroundColor: lightBlueMainDisabled,
+    hoverBackgroundColor: lightBlueMainHover,
+    clickBackgroundColor: lightBlueMainPressed,
 
     padding: "5px 14px 5px 12px",
     borderRadius: "3px",
@@ -283,7 +327,7 @@ const Dark: TTheme = {
     svg: {
       margin: "auto",
       height: "100%",
-      fill: black,
+      fill: white,
     },
 
     dropDown: {
@@ -315,28 +359,27 @@ const Dark: TTheme = {
     outline: "none",
     width: "100%",
 
-    border: "1px solid #474747",
+    border: `1px solid ${grayDarkStrong}`,
     background: black,
 
     borderConnect: "none",
-    connectBackground:
-      "linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #333333",
+    connectBackground: darkIcon,
 
-    disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
+    disableBackgroundColor: darkGrayLight,
 
     hoverBackground: black,
-    hoverBorder: "1px solid #858585",
-    hoverConnectBackground: "#FFFFFF",
+    hoverBorder: `1px solid ${grayDark}`,
+    hoverConnectBackground: white,
     hoverConnectBorder: "none",
 
-    activeBackground: "#282828",
-    activeBorder: "1px solid #CCCCCC",
-    activeConnectBackground: "rgba(255, 255, 255, 0.64)",
+    activeBackground: darkGrayLight,
+    activeBorder: `1px solid ${grayDarkStrong}`,
+    activeConnectBackground: bigGrayDarkMid,
     activeConnectBorder: "none",
 
-    color: "rgba(0, 0, 0, 0.54)",
-    disableColor: "rgba(0, 0, 0, 0.4)",
-    disabledSvgColor: "#474747",
+    color: grayDark,
+    disableColor: darkGrayDark,
+    disabledSvgColor: grayDarkStrong,
 
     text: {
       width: "100%",
@@ -349,8 +392,8 @@ const Dark: TTheme = {
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
-      color: grayMaxLight,
-      hoverColor: grayMaxLight,
+      color: white,
+      hoverColor: white,
       connectColor: darkBlack,
     },
 
@@ -367,15 +410,15 @@ const Dark: TTheme = {
   groupButton: {
     fontSize: "14px",
     lineHeight: "19px",
-    color: "#858585",
-    disableColor: "#474747",
+    color: grayDark,
+    disableColor: grayDarkStrong,
     float: "left",
     height: "19px",
     overflow: "hidden",
     padding: "0px",
 
     separator: {
-      border: `1px solid #474747`,
+      border: `1px solid ${grayDarkStrong}`,
       width: "0px",
       height: "24px",
       margin: "16px 12px 0 12px",
@@ -390,7 +433,7 @@ const Dark: TTheme = {
   groupButtonsMenu: {
     top: "0",
     background: black,
-    boxShadow: " 0px 10px 18px -8px rgba(0, 0, 0, 0.100306)",
+    boxShadow: `0px 10px 18px -8px ${menuShadow}`,
     height: "48px",
     tabletHeight: "56px",
     padding: "0 18px 19px 0",
@@ -405,20 +448,20 @@ const Dark: TTheme = {
       width: "20px",
       height: "20px",
       padding: "8px",
-      hoverBackgroundColor: grayMaxLight,
-      backgroundColor: "#858585",
+      hoverBackgroundColor: white,
+      backgroundColor: grayDark,
     },
   },
 
-  iconButton: { color: "#858585", hoverColor: grayMaxLight },
+  iconButton: { color: grayDark, hoverColor: white },
   selectorAddButton: {
-    background: "#242424",
-    hoverBackground: "#282828",
-    activeBackground: "#242424",
+    background: grayDarkMid,
+    hoverBackground: darkGrayLight,
+    activeBackground: grayDarkMid,
 
-    iconColor: "#858585",
-    iconColorHover: "#FFFFFF",
-    iconColorActive: "#CCCCCC",
+    iconColor: grayDark,
+    iconColorHover: white,
+    iconColorActive: darkGrayDark,
 
     border: `none`,
     boxSizing: "border-box",
@@ -426,8 +469,8 @@ const Dark: TTheme = {
     height: " 32px",
     width: "32px",
     padding: "10px",
-    color: "#858585",
-    hoverColor: grayMaxLight,
+    color: grayDark,
+    hoverColor: white,
   },
 
   saveCancelButtons: {
@@ -440,121 +483,60 @@ const Dark: TTheme = {
     unsavedColor: gray,
   },
 
-  selectedItem: {
-    background: "#242424",
-    border: `1px solid #242424`,
-    borderRadius: "3px",
-
-    textBox: {
-      padding: "0 8px",
-      height: "32px",
-      alignItems: "center",
-      borderRight: `1px solid #242424`,
-    },
-
-    text: {
-      color: grayMaxLight,
-      disabledColor: "#474747",
-    },
-
-    closeButton: {
-      alignItems: "center",
-      padding: "0 8px",
-      color: grayMaxLight,
-      colorHover: grayMaxLight,
-      backgroundColor: "#242424",
-    },
-  },
-
   checkbox: {
-    fillColor: "#282828",
-    borderColor: "#474747",
+    fillColor: darkGrayLight,
+    borderColor: grayDarkStrong,
     arrowColor: white,
     indeterminateColor: white,
 
-    disableArrowColor: "#474747",
-    disableBorderColor: "#545454",
-    disableFillColor: "#545454",
-    disableIndeterminateColor: "#474747",
+    disableArrowColor: grayDarkStrong,
+    disableBorderColor: grayDarkMid,
+    disableFillColor: darkGrayLight,
+    disableIndeterminateColor: grayDarkStrong,
 
-    hoverBorderColor: "#858585",
+    hoverBorderColor: grayDark,
     hoverIndeterminateColor: white,
 
-    pressedBorderColor: "#474747",
+    pressedBorderColor: grayDarkStrong,
     pressedFillColor: black,
 
-    focusColor: "#858585",
+    focusColor: grayDark,
 
-    errorColor: "#E06451",
+    errorColor: darkErrorStatus,
   },
 
-  // slider: {
-  //   sliderBarColorProgress: blueMain,
-  //   sliderBarColorProgressDisabled: grayMid,
-  //   sliderBarColor: grayLightMid,
-  //   sliderBarDisableColor: grayLightMid,
-
-  //   sliderBarBorderActive: `1px solid ${globalColors.grayMid}`,
-  //   sliderBarBorderDisable: `1px solid ${globalColors.grayMid}`,
-
-  //   thumbFillDisable: grayLightMid,
-  //   thumbFillActive: grayLightMid,
-
-  //   thumbBorderColorActive: `1px solid ${globalColors.gray}`,
-  //   thumbBorderColorDisable: `1px solid ${globalColors.grayMid}`,
-
-  //   sliderWidth: "202px",
-
-  //   arrowHover: blueMain,
-  //   arrowColor: grayMid,
-  // },
-
   viewSelector: {
     fillColor: black,
-    checkedFillColor: "#858585",
+    checkedFillColor: grayDark,
     fillColorDisabled: grayLight,
     disabledFillColor: grayLightMid,
-    disabledFillColorInner: grayMid,
-    hoverBorderColor: "#858585",
-    borderColor: "#474747",
+    disabledFillColorInner: grayStrong,
+    hoverBorderColor: grayDark,
+    borderColor: grayDarkStrong,
   },
 
   radioButton: {
-    textColor: grayMaxLight,
-    textDisableColor: "#5c5c5c",
+    textColor: white,
+    textDisableColor: grayDarkText,
 
     marginBeforeLabel: "8px",
 
-    background: "#292929",
-    disableBackground: "#545454",
+    background: black,
+    disableBackground: darkGrayLight,
 
-    fillColor: grayMaxLight,
-    disableFillColor: "#474747",
+    fillColor: white,
+    disableFillColor: grayDarkStrong,
 
-    borderColor: "#646464",
+    borderColor: grayDarkStrong,
     disableBorderColor: "none",
-    hoverBorderColor: grayMaxLight,
-  },
-
-  requestLoader: {
-    backgroundColor: white,
-    border: `1px solid ${globalColors.veryLightGrey}`,
-    overflow: "hidden",
-    padding: "5px 10px",
-    lineHeight: "16px",
-    borderRadius: "5px",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-
-    marginRight: "10px",
-    top: "10px",
-    width: "100%",
+    hoverBorderColor: white,
   },
 
   row: {
     minHeight: "47px",
     width: "100%",
-    borderBottom: "#474747",
-    backgroundColor: globalColors.veryDarkGrey,
+    borderBottom: grayDarkStrong,
+    backgroundColor: globalColors.lightDarkGrayHover,
     minWidth: "160px",
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -597,7 +579,7 @@ const Dark: TTheme = {
   },
 
   rowContainer: {
-    borderColor: "#474747",
+    borderColor: grayDarkStrong,
   },
 
   badge: {
@@ -606,14 +588,14 @@ const Dark: TTheme = {
     lineHeight: "0.8",
     overflow: "hidden",
     color: white,
-    backgroundColor: "#F59931",
-    disableBackgroundColor: "#858585",
+    backgroundColor: darkStatusWarning,
+    disableBackgroundColor: grayDark,
   },
 
   scrollbar: {
-    bgColor: "rgba(136, 136, 136, 0.4)",
-    hoverBgColor: "rgba(136, 136, 136, 0.64)",
-    pressBgColor: "rgba(136, 136, 136, 0.8)",
+    bgColor: darkScroll,
+    hoverBgColor: darkScrollHover,
+    pressBgColor: darkScrollActive,
     paddingInlineEnd: "17px !important",
     paddingInlineEndMobile: "8px !important",
   },
@@ -621,14 +603,14 @@ const Dark: TTheme = {
   modalDialog: {
     backgroundColor: black,
     textColor: white,
-    headerBorderColor: "#474747",
-    footerBorderColor: "#474747",
+    headerBorderColor: grayDarkStrong,
+    footerBorderColor: grayDarkStrong,
     width: "auto",
     maxwidth: "560px",
     margin: " 0 auto",
     minHeight: "100%",
 
-    colorDisabledFileIcons: "#5c5c5c",
+    colorDisabledFileIcons: grayDarkText,
 
     backdrop: {
       backgroundRGBA: {
@@ -657,14 +639,8 @@ const Dark: TTheme = {
       },
     },
 
-    header: {
-      borderBottom: `1px solid #474747`,
-    },
-
     closeButton: {
-      // backgroundColor: "#9A9EA3",
-
-      fillColor: "#9A9EA3",
+      fillColor: darkGrayDark,
     },
   },
 
@@ -686,11 +662,11 @@ const Dark: TTheme = {
   },
 
   input: {
-    color: grayMaxLight,
-    disableColor: "#6c6c6c",
+    color: white,
+    disableColor: grayDarkStrong,
 
-    backgroundColor: "#292929",
-    disableBackgroundColor: "#474747",
+    backgroundColor: black,
+    disableBackgroundColor: grayDarkStrong,
 
     width: {
       base: "173px",
@@ -705,20 +681,20 @@ const Dark: TTheme = {
     boxSizing: "border-box",
     border: "solid 1px",
 
-    borderColor: "#474747",
-    errorBorderColor: "#E06451",
-    warningBorderColor: warningColor,
-    disabledBorderColor: "#474747",
+    borderColor: grayDarkStrong,
+    errorBorderColor: darkErrorStatus,
+    warningBorderColor: darkStatusWarning,
+    disabledBorderColor: grayDarkStrong,
 
-    hoverBorderColor: "#858585",
-    hoverErrorBorderColor: "#E06451",
-    hoverWarningBorderColor: warningColor,
-    hoverDisabledBorderColor: "#474747",
+    hoverBorderColor: grayDark,
+    hoverErrorBorderColor: darkErrorStatus,
+    hoverWarningBorderColor: darkStatusWarning,
+    hoverDisabledBorderColor: grayDarkStrong,
 
-    focusBorderColor: grayMaxLight,
-    focusErrorBorderColor: "#E06451",
-    focusWarningBorderColor: warningColor,
-    focusDisabledBorderColor: "#474747",
+    focusBorderColor: white,
+    focusErrorBorderColor: darkErrorStatus,
+    focusWarningBorderColor: darkStatusWarning,
+    focusDisabledBorderColor: grayDarkStrong,
   },
 
   fileInput: {
@@ -747,7 +723,7 @@ const Dark: TTheme = {
     },
 
     icon: {
-      background: "#292929",
+      background: black,
 
       border: "1px solid",
       borderRadius: "0 3px 3px 0",
@@ -780,13 +756,13 @@ const Dark: TTheme = {
   },
 
   passwordInput: {
-    color: "#858585",
-    disableColor: "#858585",
+    color: grayDark,
+    disableColor: grayDark,
 
     tooltipTextColor: black,
 
-    iconColor: "#646464",
-    hoverIconColor: "#858585",
+    iconColor: grayDarkStrong,
+    hoverIconColor: grayDark,
 
     hoverColor: gray,
 
@@ -826,26 +802,26 @@ const Dark: TTheme = {
     fontSize: "14px",
     fontWeight: "600",
 
-    iconColor: "#646464",
-    hoverIconColor: "#858585",
+    iconColor: grayDarkStrong,
+    hoverIconColor: grayDark,
   },
 
   inputPhone: {
-    activeBorderColor: "#2da7db",
-    inactiveBorderColor: "#474747",
-    errorBorderColor: "#f21c0e",
-    backgroundColor: "#33333",
-    color: "#fff",
-    scrollBackground: "#858585",
-    placeholderColor: "#858585",
-    dialCodeColor: "#858585",
+    activeBorderColor: lightSecondMain,
+    inactiveBorderColor: grayDarkStrong,
+    errorBorderColor: darkErrorStatus,
+    backgroundColor: black,
+    color: white,
+    scrollBackground: grayDark,
+    placeholderColor: grayDark,
+    dialCodeColor: grayDark,
     width: "320px",
     height: "44px",
   },
   textInput: {
     fontWeight: "normal",
-    placeholderColor: "rgba(255, 255, 255, 0.2)",
-    disablePlaceholderColor: "#6c6c6c",
+    placeholderColor: grayDark,
+    disablePlaceholderColor: grayDarkStrong,
 
     transition: "all 0.2s ease 0s",
     appearance: "none",
@@ -890,30 +866,30 @@ const Dark: TTheme = {
     padding: "2px 0px 2px 2px",
     margin: "0",
 
-    borderColor: grayMaxLight,
+    borderColor: white,
 
-    iconColor: "#858585",
-    hoverIconColor: "#FFFFFF",
+    iconColor: grayDark,
+    hoverIconColor: white,
   },
 
   textArea: {
-    disabledColor: "#474747",
+    disabledColor: grayDarkStrong,
 
-    focusBorderColor: grayMaxLight,
-    focusErrorBorderColor: "#E06451",
+    focusBorderColor: white,
+    focusErrorBorderColor: darkErrorStatus,
     focusOutline: "none",
 
     scrollWidth: "100%",
     scrollHeight: "91px",
 
-    numerationColor: "#858585",
+    numerationColor: grayDark,
 
     copyIconFilter:
       "invert(62%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(85%) contrast(87%)",
   },
 
   link: {
-    color: grayMaxLight,
+    color: white,
     lineHeight: "calc(100% + 6px)",
     opacity: "0.5",
     textDecoration: "none",
@@ -930,7 +906,7 @@ const Dark: TTheme = {
     paddingRight: "20px",
     semiTransparentOpacity: "0.5",
     textDecoration: "none",
-    disableColor: "#5c5c5c",
+    disableColor: grayDarkText,
 
     svg: {
       opacity: "1",
@@ -945,17 +921,17 @@ const Dark: TTheme = {
       iconColor: white,
     },
     color: {
-      default: "#858585",
-      hover: "#ADADAD",
-      active: "#FFFFFF",
-      focus: "#FFFFFF",
+      default: grayDark,
+      hover: darkGrayDark,
+      active: white,
+      focus: white,
     },
 
     background: {
       default: "transparent",
-      hover: "#474747",
-      active: "#282828",
-      focus: "#242424",
+      hover: grayDarkStrong,
+      active: darkGrayLight,
+      focus: grayDarkMid,
     },
     caret: {
       width: "5px",
@@ -976,14 +952,14 @@ const Dark: TTheme = {
 
   tooltip: {
     borderRadius: "6px",
-    boxShadow: "0px 10px 15px rgba(0, 0, 0, 0.40)",
+    boxShadow: `0px 10px 15px ${popupShadow}`,
     opacity: "1",
     padding: "8px 12px",
     pointerEvents: "auto",
     maxWidth: "340px",
-    color: "#242424",
+    color: grayDarkMid,
     textColor: white,
-    backgroundColor: "#282828",
+    backgroundColor: darkGrayLight,
 
     before: {
       border: "none",
@@ -1038,7 +1014,7 @@ const Dark: TTheme = {
     },
 
     errorLabel: {
-      color: "#E06451",
+      color: darkErrorStatus,
     },
   },
 
@@ -1097,8 +1073,8 @@ const Dark: TTheme = {
     },
 
     imageContainer: {
-      backgroundImage: "#606060",
-      background: "#606060",
+      backgroundImage: grayDarkStrong,
+      background: grayDarkStrong,
       groupBackground: grayDarkMid,
       borderRadius: "50%",
       height: "100%",
@@ -1108,24 +1084,24 @@ const Dark: TTheme = {
         width: "50%",
         height: "100%",
         margin: "auto",
-        fill: "#858585",
+        fill: grayDark,
       },
     },
 
     administrator: {
-      fill: "#A15B1D",
+      fill: darkStatusWarning,
       stroke: darkBlack,
       color: white,
     },
 
     guest: {
-      fill: "#575757",
+      fill: darkIcon,
       stroke: darkBlack,
       color: white,
     },
 
     owner: {
-      fill: "#A38A1A",
+      fill: favoritesStatus,
       stroke: darkBlack,
       color: white,
     },
@@ -1134,7 +1110,7 @@ const Dark: TTheme = {
       right: "0px",
       bottom: "0px",
       fill: black,
-      backgroundColor: "#b2b2b2",
+      backgroundColor: bigGrayDarkMid,
       borderRadius: "50%",
       height: "32px",
       width: "32px",
@@ -1147,8 +1123,8 @@ const Dark: TTheme = {
     },
 
     icon: {
-      background: "#242424",
-      color: "#ADADAD",
+      background: grayDarkMid,
+      color: darkGrayDark,
     },
 
     width: {
@@ -1180,8 +1156,8 @@ const Dark: TTheme = {
     maxWidth: "400px",
 
     selectLink: {
-      color: "#474747",
-      linkColor: "#E06A1B",
+      color: grayDarkStrong,
+      linkColor: darkLink,
     },
 
     slider: {
@@ -1190,9 +1166,9 @@ const Dark: TTheme = {
       backgroundColor: "transparent",
 
       runnableTrack: {
-        background: "#242424",
-        focusBackground: "#242424",
-        border: `1.4px solid #242424`,
+        background: grayDarkMid,
+        focusBackground: grayDarkMid,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "5.6px",
         width: "100%",
         height: "8px",
@@ -1202,28 +1178,28 @@ const Dark: TTheme = {
         marginTop: "-9.4px",
         width: "24px",
         height: "24px",
-        background: grayMaxLight,
-        disabledBackground: "#A6DCF2",
+        background: white,
+        disabledBackground: darkGrayDark,
         borderWidth: "6px",
         borderStyle: "solid",
         borderColor: `${black}`,
         borderRadius: "30px",
-        boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+        boxShadow: `0px 5px 20px ${popupShadow}`,
       },
 
       thumb: {
         width: "24px",
         height: "24px",
-        background: grayMaxLight,
+        background: white,
         border: `6px solid ${black}`,
         borderRadius: "30px",
         marginTop: "0px",
-        boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+        boxShadow: `0px 5px 20px ${popupShadow}`,
       },
 
       rangeTrack: {
-        background: "#242424",
-        border: `1.4px solid #242424`,
+        background: grayDarkMid,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "5.6px",
         width: "100%",
         height: "8px",
@@ -1232,10 +1208,10 @@ const Dark: TTheme = {
       rangeThumb: {
         width: "14px",
         height: "14px",
-        background: grayMaxLight,
+        background: white,
         border: `6px solid ${black}`,
         borderRadius: "30px",
-        boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.13)",
+        boxShadow: `0px 5px 20px ${popupShadow}`,
       },
 
       track: {
@@ -1248,48 +1224,44 @@ const Dark: TTheme = {
       },
 
       trackNumber: {
-        color: "#A3A9AE",
+        color: gray,
       },
 
       fillLower: {
-        background: "#242424",
-        focusBackground: "#242424",
-        border: `1.4px solid #242424`,
+        background: grayDarkMid,
+        focusBackground: grayDarkMid,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "11.2px",
       },
 
       fillUpper: {
-        background: "#242424",
-        focusBackground: "#242424",
-        border: `1.4px solid #242424`,
+        background: grayDarkMid,
+        focusBackground: grayDarkMid,
+        border: `1.4px solid ${grayDarkMid}`,
         borderRadius: "11.2px",
       },
     },
 
-    dropZone: {
-      border: `1px dashed #474747`,
-    },
-
     container: {
       miniPreview: {
         width: "160px",
-        border: `1px solid #242424`,
+        border: `1px solid ${grayDarkMid}`,
         borderRadius: "6px",
         padding: "8px",
       },
 
       buttons: {
         height: "32px",
-        background: "#292929",
+        background: black,
         mobileWidth: "40px",
         mobileHeight: "100%",
         mobileBackground: "none",
       },
 
       button: {
-        background: "#b6b6b6",
-        fill: "#858585",
-        hoverFill: grayMaxLight,
+        background: grayDark,
+        fill: grayDark,
+        hoverFill: white,
         padding: "0 12px",
         height: "40px",
         borderRadius: "6px",
@@ -1305,85 +1277,24 @@ const Dark: TTheme = {
   },
 
   backdrop: {
-    backgroundColor: "rgba(20, 20, 20, 0.8)",
+    backgroundColor: darkGrayBlackout,
     unsetBackgroundColor: "unset",
   },
 
-  treeMenu: {
-    disabledColor: "#5c5c5c",
-  },
-
-  treeNode: {
-    background: "#3D3D3D",
-    disableColor: "#858585",
-
-    icon: {
-      color: "#ADADAD",
-    },
-
-    dragging: {
-      draggable: {
-        background: "rgba(230, 211, 138, 0.12)",
-        hoverBackgroundColor: "rgba(204, 184, 102, 0.2)",
-        borderRadius: "3px",
-      },
-
-      title: {
-        width: "85%",
-        // color: "#000",
-      },
-    },
-
-    draggable: {
-      color: cyanBlueDarkShade,
-      dragOverBackgroundColor: strongBlue,
-      border: `1px ${strongBlue} solid`,
-      dragOverColor: white,
-
-      gapTop: {
-        borderTop: `2px blue solid`,
-      },
-
-      gapBottom: {
-        borderBottom: `2px blue solid`,
-      },
-    },
-
-    contentWrapper: {
-      color: darkRed,
-    },
-
-    title: {
-      color: "#a9a9a9",
-    },
-
-    selected: {
-      background: black,
-      hoverBackgroundColor: black,
-      borderRadius: "3px",
-    },
-
-    checkbox: {
-      border: `2px solid ${white}`,
-      borderTop: 0,
-      borderLeft: 0,
-    },
-  },
-
   progressBar: {
-    backgroundColor: "#858585",
+    backgroundColor: grayDark,
 
     animation: {
-      background: "#FFFFFF",
+      background: white,
     },
 
     percent: {
-      background: "#E17415",
+      background: darkStatusWarning,
     },
 
     color: {
       error: darkErrorStatus,
-      status: grayMaxLight,
+      status: white,
     },
   },
 
@@ -1391,20 +1302,19 @@ const Dark: TTheme = {
     fontWeight: "600",
     fontSize: "13px",
     zIndex: "400",
-    background: "#333333",
+    background: black,
     borderRadius: "6px",
-    boxShadow: "0px 8px 16px 0px #040F1B29",
-    // boxShadowMobile: "0px -4px 60px rgba(0, 0, 0, 0.25)",
-    border: "1px solid #474747",
+    boxShadow: `0px 8px 16px 0px ${boxShadowDarkColor}`,
+    border: `1px solid ${grayDarkStrong}`,
   },
 
   dropDownItem: {
-    color: grayMaxLight,
+    color: white,
     disableColor: gray,
     backgroundColor: black,
-    hoverBackgroundColor: "#3D3D3D",
+    hoverBackgroundColor: lightDarkGrayHover,
     hoverDisabledBackgroundColor: black,
-    selectedBackgroundColor: "#282828",
+    selectedBackgroundColor: darkGrayLight,
     fontWeight: "600",
     fontSize: "13px",
     width: "100%",
@@ -1421,13 +1331,13 @@ const Dark: TTheme = {
       marginRight: "8px",
       lineHeight: "10px",
 
-      color: grayMaxLight,
-      disableColor: grayMaxLight,
+      color: white,
+      disableColor: white,
     },
 
     separator: {
       padding: "0px 16px",
-      borderBottom: `1px solid #474747`,
+      borderBottom: `1px solid ${grayDarkStrong}`,
       margin: " 4px 16px 4px",
       lineHeight: "1px",
       height: "1px",
@@ -1437,35 +1347,35 @@ const Dark: TTheme = {
 
   toast: {
     active: {
-      success: "#292929",
-      error: "#292929",
-      info: "#292929",
-      warning: "#292929",
+      success: black,
+      error: black,
+      info: black,
+      warning: black,
     },
     hover: {
-      success: "#292929",
-      error: "#292929",
-      info: "#292929",
-      warning: "#292929",
+      success: black,
+      error: black,
+      info: black,
+      warning: black,
     },
     border: {
-      success: "2px solid #9de051",
-      error: "2px solid #e0b051",
-      info: "2px solid #e0d751",
-      warning: "2px solid #e07751",
+      success: `2px solid ${darkToastDone}`,
+      error: `2px solid ${darkToastAlert}`,
+      info: `2px solid ${darkToastInfo}`,
+      warning: `2px solid ${darkToastWarning}`,
     },
 
     zIndex: "9999",
     position: "fixed",
     padding: "4px",
     width: "320px",
-    color: grayMaxLight,
+    color: white,
     top: "16px",
     right: "24px",
     marginTop: "0px",
 
     closeButton: {
-      color: grayMaxLight,
+      color: white,
       fontWeight: "700",
       fontSize: "14px",
       background: "transparent",
@@ -1477,11 +1387,11 @@ const Dark: TTheme = {
 
     main: {
       marginBottom: "1rem",
-      boxShadow: "0px 16px 16px rgba(0, 0, 0, 0.16)",
+      boxShadow: `0px 16px 16px ${popupShadow}`,
       maxHeight: "800px",
       overflow: "hidden",
       borderRadius: "6px",
-      color: grayMaxLight,
+      color: white,
       margin: "0 0 12px",
       padding: "12px",
       minHeight: "32px",
@@ -1498,17 +1408,17 @@ const Dark: TTheme = {
       height: "16px",
       minHeight: "16px",
       color: {
-        success: "#9DE051",
-        error: "#E0B151",
-        info: "#E0D751",
-        warning: "#E07751",
+        success: darkToastDone,
+        error: darkToastAlert,
+        info: darkToastInfo,
+        warning: darkToastWarning,
       },
     },
 
     text: {
       lineHeight: " 1.3",
       fontSize: "12px",
-      color: grayMaxLight,
+      color: white,
     },
 
     title: {
@@ -1517,96 +1427,46 @@ const Dark: TTheme = {
       marginBottom: "5px",
       lineHeight: "16px",
       color: {
-        success: "#9DE051",
-        error: "#E0B151",
-        info: "#E0D751",
-        warning: "#E07751",
+        success: darkToastDone,
+        error: darkToastAlert,
+        info: darkToastInfo,
+        warning: darkToastWarning,
       },
       fontSize: "12px",
     },
 
-    closeButtonColor: grayMaxLight,
+    closeButtonColor: white,
   },
 
   loader: {
-    color: shuttleGrey,
+    color: loaderDark,
     size: "40px",
     marginRight: "2px",
     borderRadius: "50%",
   },
   rombsLoader: {
     blue: {
-      colorStep_1: "#333",
-      colorStep_2: "#333",
+      colorStep_1: black,
+      colorStep_2: black,
       colorStep_3: "#323032",
       colorStep_4: "#323032",
     },
     red: {
-      colorStep_1: "#333",
-      colorStep_2: "#333",
+      colorStep_1: black,
+      colorStep_2: black,
       colorStep_3: "#323032",
     },
     green: {
-      colorStep_1: "#333",
-      colorStep_2: "#333",
+      colorStep_1: black,
+      colorStep_2: black,
       colorStep_3: "#323032",
       colorStep_4: "#323032",
     },
   },
   dialogLoader: {
-    borderBottom: "1px solid #292929",
+    borderBottom: `1px solid ${black}`,
   },
 
-  // dropDownItem: {
-  //   width: "100%",
-  //   maxWidth: "240px",
-  //   border: "none",
-  //   cursor: "pointer",
-  //   padding: "0px 16px",
-  //   lineHeight: "32px",
-  //   textAlign: "left",
-  //   background: "none",
-  //   textDecoration: "none",
-  //   fontStyle: "normal",
-  //   fontWeight: "600",
-  //   fontSize: "13px",
-
-  //   whiteSpace: "nowrap",
-  //   overflow: "hidden",
-  //   textOverflow: "ellipsis",
-
-  //   outline: "none",
-  //   color: black,
-  //   textTransform: "none",
-
-  //   hoverBackgroundColor: grayLight,
-  //   noHoverBackgroundColor: white,
-
-  //   header: {
-  //     color: gray,
-  //     hoverCursor: "default",
-  //     hoverBackgroundColor: "white",
-  //     textTransform: "uppercase",
-  //   },
-
-  //   disabled: {
-  //     color: gray,
-  //     hoverCursor: "default",
-  //     hoverBackgroundColor: "white",
-  //   },
-
-  //   separator: {
-  //     padding: "0px 16px",
-  //     border: `0.5px solid ${grayLightMid}`,
-  //     cursor: "default",
-  //     margin: "6px 16px 6px",
-  //     lineHeight: "1px",
-  //     height: "1px",
-  //     width: "calc(100% - 32px)",
-  //   },
-
-  //   tablet: { lineHeight: "36px" },
-
   comboBox: {
     padding: "6px 0px",
     background: black,
@@ -1640,36 +1500,36 @@ const Dark: TTheme = {
       selectPaddingRightNoArrow: "14px",
       selectPaddingRight: "8px",
 
-      color: "#858585",
-      disabledColor: "#858585",
-      background: "#292929",
+      color: grayDark,
+      disabledColor: grayDark,
+      background: black,
       backgroundWithBorder: "none",
       backgroundModernView: "none",
 
-      border: `1px solid #474747`,
+      border: `1px solid ${grayDarkStrong}`,
       borderRadius: "3px",
 
-      borderColor: "#474747",
-      openBorderColor: grayMaxLight,
+      borderColor: grayDarkStrong,
+      openBorderColor: white,
 
-      disabledBorderColor: "#474747",
-      disabledBackground: "#474747",
+      disabledBorderColor: grayDarkStrong,
+      disabledBackground: grayDarkStrong,
 
-      hoverBorderColor: "#858585",
-      hoverBorderColorOpen: grayMaxLight,
-      hoverDisabledBorderColor: "#474747",
+      hoverBorderColor: grayDark,
+      hoverBorderColorOpen: white,
+      hoverDisabledBorderColor: grayDarkStrong,
 
-      hoverBackgroundModernView: "#474747",
-      activeBackgroundModernView: "#282828",
-      focusBackgroundModernView: "#242424",
+      hoverBackgroundModernView: grayDarkStrong,
+      activeBackgroundModernView: darkGrayLight,
+      focusBackgroundModernView: grayDarkMid,
     },
 
     label: {
       marginRightWithBorder: "13px",
       marginRight: "4px",
 
-      disabledColor: "#858585",
-      color: "#858585",
+      disabledColor: grayDark,
+      color: grayDark,
       alternativeColor: grayDark,
       selectedColor: white,
 
@@ -1684,9 +1544,9 @@ const Dark: TTheme = {
       width: "16px",
       height: "16px",
 
-      defaultDisabledColor: "#858585",
+      defaultDisabledColor: grayDark,
       defaultColor: white,
-      disabledColor: "#858585",
+      disabledColor: grayDark,
       color: white,
       selectedColor: white,
     },
@@ -1694,7 +1554,7 @@ const Dark: TTheme = {
     plusBadge: {
       color: black,
       bgColor: grayDark,
-      selectedBgColor: "#ADADAD",
+      selectedBgColor: darkGrayDark,
     },
   },
 
@@ -1714,12 +1574,12 @@ const Dark: TTheme = {
   },
 
   toggleButton: {
-    fillColorDefault: "#4781D1",
-    fillColorOff: "#292929",
-    hoverFillColorOff: "#3D3D3D",
+    fillColorDefault: lightBlueMain,
+    fillColorOff: black,
+    hoverFillColorOff: lightDarkGrayHover,
 
-    fillCircleColor: "#FFFFFF",
-    fillCircleColorOff: "#FFFFFF",
+    fillCircleColor: white,
+    fillCircleColorOff: white,
   },
 
   contextMenuButton: {
@@ -1734,7 +1594,7 @@ const Dark: TTheme = {
       margin: "0",
       lineHeight: "56px",
       fontWeight: "700",
-      borderBottom: `1px solid #474747`,
+      borderBottom: `1px solid ${grayDarkStrong}`,
     },
 
     bodyContent: {
@@ -1743,17 +1603,17 @@ const Dark: TTheme = {
   },
 
   calendar: {
-    color: "#FFFFFF",
-    disabledColor: "#474747",
-    pastColor: "#858585",
-    onHoverBackground: "#3D3D3D",
-    titleColor: "#ADADAD",
-    outlineColor: "#474747",
-    arrowColor: "#F6F9FC",
-    disabledArrow: "#474747",
-    weekdayColor: "#858585",
-    accent: "#4781d1",
-    boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.40)",
+    color: white,
+    disabledColor: grayDarkStrong,
+    pastColor: grayDark,
+    onHoverBackground: lightDarkGrayHover,
+    titleColor: darkGrayDark,
+    outlineColor: grayDarkStrong,
+    arrowColor: grayDarkText,
+    disabledArrow: grayDarkStrong,
+    weekdayColor: grayDark,
+    accent: lightBlueMain,
+    boxShadow: `0px 12px 40px 0px ${popupShadow}`,
   },
 
   datePicker: {
@@ -1762,14 +1622,14 @@ const Dark: TTheme = {
     contentPadding: "0 16px 16px",
     bodyPadding: "16px 0",
     backgroundColor: black,
-    inputBorder: blueMain,
+    inputBorder: lightSecondMain,
     iconPadding: "8px 8px 7px 0px",
 
     contentMaxWidth: "500px",
     contentLineHeight: "56px",
     contentFontWeight: "700",
 
-    borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+    borderBottom: `1px solid ${grayDarkStrong}`,
   },
 
   aside: {
@@ -1787,120 +1647,52 @@ const Dark: TTheme = {
 
   dragAndDrop: {
     height: "100%",
-    border: `1px solid ${globalColors.darkSilver}`,
     transparentBorder: "1px solid transparent",
-    acceptBackground: "rgba(204, 184, 102, 0.2)",
-    background: "rgba(230, 211, 138, 0.12)",
+    acceptBackground: dndDarkHover,
+    background: dndDarkColor,
   },
 
-  // phoneInput: {
-  //   width: "304px",
-  //   height: "44px",
-  //   itemTextColor: black,
-  //   itemBackgroundColor: white,
-  //   itemHoverColor: grayLightMid,
-  //   scrollBackground: "rgba(0, 0, 0, 0.1)",
-  //   placeholderColor: gray,
-  // },
-
-  // squareButton: {
-  //   height: "32px",
-  //   width: "32px",
-  //   color: gray,
-  //   backgroundColor: white,
-  //   border: `1px solid ${grayMid}`,
-  //   borderRadius: "3px",
-  //   outline: "none",
-  //   hover: {
-  //     backgroundColor: white,
-  //     border: `1px solid ${gray}`,
-  //   },
-  //   click: {
-  //     backgroundColor: grayLightMid,
-  //     border: `1px solid ${gray}`,
-  //   },
-  //   disable: {
-  //     backgroundColor: grayLight,
-  //     border: `1px solid ${grayLightMid}`,
-  //   },
-  //   crossShape: {
-  //     color: graySilver,
-  //     disable: {
-  //       color: gray,
-  //     },
-  //   },
-  // },
-
-  // roundButton: {
-  //   height: "40px",
-  //   width: "40px",
-  //   backgroundColor: grayLight,
-  //   borderRadius: {
-  //     plus: "112px",
-  //     minus: "81px",
-  //   },
-  //   borderStyle: "none",
-  //   outline: "none",
-  //   hover: {
-  //     backgroundColor: grayLightMid,
-  //   },
-  //   click: {
-  //     backgroundColor: grayMid,
-  //   },
-  //   disable: {
-  //     backgroundColor: grayLight,
-  //   },
-  //   plus: {
-  //     color: grayMid,
-  //     disable: {
-  //       color: black,
-  //     },
-  //   },
-  // },
   catalog: {
-    background: "#292929",
+    background: darkGrayLight,
 
     header: {
-      borderBottom: "1px solid #474747",
-      iconFill: "#a9a9a9",
+      borderBottom: `1px solid ${grayDarkStrong}`,
+      iconFill: darkGrayDark,
     },
     control: {
-      background: "#a3a3a3",
-      fill: "#ffffff",
+      fill: white,
     },
 
-    headerBurgerColor: "#606060",
+    headerBurgerColor: darkGrayDark,
 
-    verticalLine: "1px solid #474747",
+    verticalLine: `1px solid ${grayDarkStrong}`,
 
     profile: {
-      borderTop: "1px solid #474747",
-      background: "#3D3D3D",
+      borderTop: `1px solid ${grayDarkStrong}`,
+      background: lightDarkGrayHover,
     },
 
     paymentAlert: {
-      color: "#ed7309",
-      warningColor: "#E06451",
-    },
-
-    teamTrainingAlert: {
-      titleColor: "#FFFFFF",
-      borderColor: "#388BDE",
-      linkColor: "#5299E0",
+      color: lightStatusWarning,
+      warningColor: darkErrorStatus,
     },
   },
 
   alertComponent: {
-    descriptionColor: "#ADADAD",
-    iconColor: "#ADADAD",
+    descriptionColor: darkGrayDark,
+    iconColor: darkGrayDark,
   },
 
   catalogItem: {
+    header: {
+      color: grayDark,
+      background: grayDarkStrong,
+    },
     container: {
       width: "100%",
       height: "36px",
       padding: "0 12px",
-      background: "#1b1c1d",
+      background: black,
       marginBottom: "16px",
       tablet: {
         height: "44px",
@@ -1921,8 +1713,8 @@ const Dark: TTheme = {
         width: "16px",
         height: "16px",
 
-        fill: "#a9a9a9",
-        isActiveFill: "#FFFFFF",
+        fill: darkGrayDark,
+        isActiveFill: white,
         tablet: {
           width: "20px",
           height: "20px",
@@ -1933,8 +1725,8 @@ const Dark: TTheme = {
       width: "100%",
       marginLeft: "8px",
       lineHeight: "20px",
-      color: "#a9a9a9",
-      isActiveColor: "#FFFFFF",
+      color: darkGrayDark,
+      isActiveColor: white,
       fontSize: "13px",
       fontWeight: 600,
       tablet: {
@@ -1967,633 +1759,611 @@ const Dark: TTheme = {
       },
     },
     badgeWithoutText: {
-      backgroundColor: "#F58D31",
+      backgroundColor: mainOrange,
 
       size: "8px",
       position: "-4px",
     },
-    trashIconFill: "#858585",
+    trashIconFill: grayDark,
   },
 
   navigation: {
-    expanderColor: "#eeeeee",
+    expanderColor: white,
     background: black,
-    rootFolderTitleColor: "#ADADAD",
-    boxShadow: "0px 8px 16px 0px #040F1B29",
+    rootFolderTitleColor: darkGrayDark,
+    boxShadow: `0px 8px 16px 0px ${boxShadowDarkColor}`,
 
     icon: {
-      fill: "#E06A1B",
-      stroke: "#474747",
+      fill: darkLink,
+      stroke: grayDarkStrong,
     },
   },
 
   nav: {
-    backgroundColor: "#292929",
+    backgroundColor: black,
   },
 
   navItem: {
-    baseColor: "#a9a9a9",
+    baseColor: darkGrayDark,
     activeColor: white,
-    separatorColor: "#474747",
+    separatorColor: grayDarkStrong,
 
     wrapper: {
-      hoverBackground: "#474747",
+      hoverBackground: grayDarkStrong,
     },
   },
 
   header: {
-    backgroundColor: "#282828 ",
-    recoveryColor: "#4C4C4C",
-    linkColor: "#606060",
-    productColor: "#eeeeee",
+    backgroundColor: darkGrayLight,
+    recoveryColor: darkGrayDark,
+    linkColor: darkGrayDark,
+    productColor: white,
     height: "48px",
   },
 
   menuContainer: {
-    background: "#3d3d3d",
-    color: "rgba(255, 255, 255, 0.92)",
+    background: lightDarkGrayHover,
+    color: white,
   },
 
   article: {
-    background: "#292929",
-    pinBorderColor: "#474747",
-    catalogItemHeader: "#858585",
-    catalogItemText: "rgba(255, 255, 255, 0.6)",
-    catalogItemActiveBackground: "#333333",
-    catalogShowText: "#adadad",
+    background: black,
+    pinBorderColor: grayDarkStrong,
+    catalogItemHeader: grayDark,
+    catalogItemText: grayDarkText,
+    catalogItemActiveBackground: black,
+    catalogShowText: darkGrayDark,
   },
 
   section: {
-    toggler: {
-      background: white,
-      fill: black,
-      boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
-    },
-
     header: {
       backgroundColor: black,
-      background: `linear-gradient(180deg, #333333 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`,
-      trashErasureLabelBackground: "#292929",
-      trashErasureLabelText: "#ADADAD",
+      background: `linear-gradient(180deg, ${black} 2.81%, ${grayText} 63.03%, rgba(51, 51, 51, 0) 100%);`,
+      trashErasureLabelBackground: black,
+      trashErasureLabelText: darkGrayDark,
     },
   },
 
   infoPanel: {
-    sectionHeaderToggleIcon: "#858585",
-    sectionHeaderToggleIconActive: "#c4c4c4",
+    sectionHeaderToggleIcon: grayDark,
+    sectionHeaderToggleIconActive: grayStrong,
     sectionHeaderToggleBg: "transparent",
-    sectionHeaderToggleBgActive: "#292929",
+    sectionHeaderToggleBgActive: black,
 
     backgroundColor: black,
-    blurColor: "rgba(20, 20, 20, 0.8)",
-    borderColor: "#474747",
+    blurColor: darkGrayBlackout,
+    borderColor: grayDarkStrong,
     thumbnailBorderColor: grayLightMid,
     textColor: white,
-    errorColor: "#E06451",
+    errorColor: darkErrorStatus,
 
     closeButtonWrapperPadding: "6px",
     closeButtonIcon: black,
     closeButtonSize: "12px",
-    closeButtonBg: "#a2a2a2",
 
-    nameColor: "#A3A9AE",
-    avatarColor: "#A3A9AE",
+    nameColor: gray,
+    avatarColor: gray,
 
     links: {
-      color: "#4781D1",
-      iconColor: "#858585",
-      iconErrorColor: "#E06451",
-      primaryColor: "#ADADAD",
+      color: lightBlueMain,
+      iconColor: grayDark,
+      iconErrorColor: darkErrorStatus,
+      primaryColor: darkGrayDark,
     },
 
     members: {
-      iconColor: "#858585",
-      iconHoverColor: "#ffffff",
-      isExpectName: "#A3A9AE",
-      subtitleColor: "#a3a9ae",
-      meLabelColor: "#a3a9ae",
-      roleSelectorColor: "#a3a9ae",
-      disabledRoleSelectorColor: "#a3a9ae",
-      roleSelectorArrowColor: "#a3a9ae",
-      createLink: "#858585",
-      linkAccessComboboxExpired: "#a3a9ae",
+      iconColor: grayDark,
+      iconHoverColor: white,
+      isExpectName: gray,
+      subtitleColor: gray,
+      meLabelColor: gray,
+      roleSelectorColor: gray,
+      disabledRoleSelectorColor: gray,
+      roleSelectorArrowColor: gray,
+      createLink: grayDark,
+      linkAccessComboboxExpired: gray,
+      crossFill: lightGrayDark,
     },
 
     history: {
-      subtitleColor: "#A3A9AE",
-      fileBlockBg: "#292929",
-      dateColor: "#A3A9AE",
-      fileExstColor: "#A3A9AE",
-      locationIconColor: "#A3A9AE",
-      folderLabelColor: "#A3A9AE",
-      renamedItemColor: "#A3A9AE",
-      oldRoleColor: "#A3A9AE",
-      messageColor: "#FFFFFF",
+      subtitleColor: gray,
+      fileBlockBg: darkGrayLight,
+      dateColor: gray,
+      fileExstColor: gray,
+      locationIconColor: gray,
+      folderLabelColor: gray,
+      renamedItemColor: gray,
+      oldRoleColor: gray,
+      messageColor: white,
     },
 
     details: {
-      customLogoBorderColor: "#474747",
-      commentEditorIconColor: "#eee",
-      tagBackground: "#242424",
+      customLogoBorderColor: grayDarkStrong,
+      commentEditorIconColor: white,
+      tagBackground: grayDarkMid,
     },
 
     gallery: {
-      borderColor: "#292929",
-      descriptionColor: "#eeeeee",
+      borderColor: black,
+      descriptionColor: white,
     },
 
     search: {
-      boxShadow: "0px 5px 20px 0px rgba(0, 0, 0, 0.16)",
+      boxShadow: `0px 5px 20px 0px ${popupShadow}`,
+    },
+
+    groups: {
+      textColor: grayDark,
+      tagColor: grayDarkStrong,
     },
   },
 
   filesArticleBody: {
     background: black,
-    panelBackground: "#474747",
+    panelBackground: grayDarkStrong,
 
-    fill: "#C4C4C4",
-    expanderColor: "#C4C4C4",
+    fill: grayStrong,
+    expanderColor: grayStrong,
 
     downloadAppList: {
-      textColor: "#858585",
-      color: "#5C5C5C",
-      winHoverColor: "#3785D3",
-      macHoverColor: "#fff",
-      linuxHoverColor: "#FFB800",
-      androidHoverColor: "#9BD71C",
-      iosHoverColor: "#fff",
-    },
-
-    thirdPartyList: {
-      color: "#818b91",
-      linkColor: "#DDDDDD",
+      textColor: grayDark,
+      color: grayDarkText,
+      winHoverColor: windowsColor,
+      macHoverColor: white,
+      linuxHoverColor: linuxColor,
+      androidHoverColor: androidColor,
+      iosHoverColor: white,
     },
     devTools: {
-      border: "1px solid #474747",
-      color: "#858585",
+      border: `1px solid ${grayDarkStrong}`,
+      color: grayDark,
     },
   },
 
   peopleArticleBody: {
-    iconColor: "#C4C4C4",
-    expanderColor: "#C4C4C4",
+    iconColor: grayStrong,
+    expanderColor: grayStrong,
   },
 
   peopleTableRow: {
-    fill: graySilver,
+    nameColor: white,
+    pendingNameColor: grayDark,
 
-    nameColor: grayMaxLight,
-    pendingNameColor: "#6f6f6f",
-
-    sideInfoColor: "#858585",
-    pendingSideInfoColor: "#5a5a5a",
+    sideInfoColor: grayDark,
+    pendingSideInfoColor: grayDarkStrong,
   },
 
   filterInput: {
     button: {
-      border: "1px solid #474747",
-      hoverBorder: "1px solid #858585",
+      border: `1px solid ${grayDarkStrong}`,
+      hoverBorder: `1px solid ${grayDark}`,
 
-      openBackground: "#a3a9ae",
+      openBackground: gray,
 
-      openFill: "#eeeeee",
+      openFill: white,
     },
 
     filter: {
-      background: "#333333",
-      border: "1px solid #474747",
-      color: "#a3a9ae",
+      background: black,
+      border: `1px solid ${grayDarkStrong}`,
+      color: gray,
 
-      separatorColor: "#474747",
-      indicatorColor: "#F58D31",
+      separatorColor: grayDarkStrong,
+      indicatorColor: mainOrange,
 
       selectedItem: {
-        background: "#eeeeee",
-        border: "#eeeeee",
-        color: "#333333",
+        background: white,
+        border: white,
+        color: black,
       },
     },
 
     sort: {
-      background: "#333333",
-      hoverBackground: "#292929",
-      selectedViewIcon: "rgba(255, 255, 255, 0.88)",
-      viewIcon: "#858585",
-      sortFill: "rgba(255, 255, 255, 0.6)",
+      background: black,
+      hoverBackground: black,
+      selectedViewIcon: lightGraySelected,
+      viewIcon: grayDark,
+      sortFill: darkGrayDark,
 
-      tileSortFill: "#eeeeee",
-      tileSortColor: "#eeeeee",
+      tileSortFill: white,
+      tileSortColor: white,
     },
 
     selectedItems: {
-      background: "#242424",
-      hoverBackground: "#3d3d3d",
+      background: grayDarkMid,
+      hoverBackground: lightDarkGrayHover,
     },
   },
 
-  profileInfo: {
-    color: "#858585",
-    iconButtonColor: grayMaxLight,
-    linkColor: grayMaxLight,
-
-    tooltipLinkColor: "#e06a1b",
-    iconColor: "#C96C27",
-  },
-
   updateUserForm: {
     tooltipTextColor: black,
     borderTop: "none",
   },
 
   tableContainer: {
-    borderRight: "2px solid #474747",
-    hoverBorderColor: "#474747",
-    tableCellBorder: "1px solid #474747",
+    borderRight: `2px solid ${grayDarkStrong}`,
+    hoverBorderColor: grayDarkStrong,
+    tableCellBorder: `1px solid ${grayDarkStrong}`,
 
     groupMenu: {
       background: black,
-      borderBottom: "1px solid #474747",
-      borderRight: "1px solid #474747",
-      boxShadow: "0px 40px 60px rgba(0, 0, 0, 0.12)",
+      borderBottom: `1px solid ${grayDarkStrong}`,
+      borderRight: `1px solid ${grayDarkStrong}`,
+      boxShadow: `0px 40px 60px ${menuShadow}`,
     },
 
     header: {
       background: black,
-      borderBottom: "1px solid #474747",
-      textColor: "#858585",
-      activeTextColor: "#858585",
-      hoverTextColor: grayMaxLight,
+      borderBottom: `1px solid ${grayDarkStrong}`,
+      textColor: grayDark,
+      activeTextColor: grayDark,
+      hoverTextColor: white,
 
-      iconColor: "#858585",
-      activeIconColor: "#858585",
-      hoverIconColor: grayMaxLight,
+      iconColor: grayDark,
+      activeIconColor: grayDark,
+      hoverIconColor: white,
 
-      borderImageSource: `linear-gradient(to right,${black} 21px,#474747 21px,#474747 calc(100% - 20px),${black} calc(100% - 20px))`,
-      borderHoverImageSource: `linear-gradient(to right,${black} 0px,#474747 0px,#474747 100% ,${black} 100%)`,
-      lengthenBorderImageSource: `linear-gradient(to right, #474747, #474747)`,
-      hotkeyBorderBottom: `1px solid ${globalColors.blueMain}`,
+      borderImageSource: `linear-gradient(to right,${black} 21px,${grayDarkStrong} 21px,${grayDarkStrong} calc(100% - 20px),${black} calc(100% - 20px))`,
+      borderHoverImageSource: `linear-gradient(to right,${black} 0px,${grayDarkStrong} 0px,${grayDarkStrong} 100% ,${black} 100%)`,
+      lengthenBorderImageSource: `linear-gradient(to right, ${grayDarkStrong}, ${grayDarkStrong})`,
+      hotkeyBorderBottom: `1px solid ${lightSecondMain}`,
 
-      settingsIconDisableColor: "#474747",
+      settingsIconDisableColor: grayDarkStrong,
     },
 
     tableCell: {
-      border: "1px solid #474747",
+      border: `1px solid ${grayDarkStrong}`,
     },
   },
   filesSection: {
     rowView: {
-      checkedBackground: "#3D3D3D",
+      checkedBackground: lightDarkGrayHover,
 
-      draggingBackground: "rgba(230, 211, 138, 0.12)",
-      draggingHoverBackground: "rgba(204, 184, 102, 0.2)2",
+      draggingBackground: dndColor,
+      draggingHoverBackground: dndHoverColor,
 
       shareButton: {
-        color: "#858585",
-        fill: "#858585",
+        color: grayDark,
+        fill: grayDark,
       },
 
-      sideColor: "#858585",
-      linkColor: grayMaxLight,
-      textColor: "#858585",
+      sideColor: grayDark,
+      linkColor: white,
+      textColor: grayDark,
 
-      editingIconColor: "#eeeeee",
-      shareHoverColor: "#eeeeee",
-      pinColor: "#FFFFFF",
+      editingIconColor: white,
+      shareHoverColor: white,
+      pinColor: white,
     },
 
     tableView: {
       fileName: {
-        linkColor: grayMaxLight,
-        textColor: "#858585",
+        linkColor: white,
+        textColor: grayDark,
       },
 
       row: {
-        checkboxChecked: `linear-gradient(to right, ${black} 24px, #474747 24px)`,
-        checkboxDragging:
-          "linear-gradient(to right, rgba(230, 211, 138, 0.12) 24px, #474747 24px)",
-        checkboxDraggingHover:
-          "inear-gradient(to right,rgba(204, 184, 102, 0.2) 24px, #474747 24px)",
+        checkboxChecked: `linear-gradient(to right, ${black} 24px, ${grayDarkStrong} 24px)`,
+        checkboxDragging: `linear-gradient(to right, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
+        checkboxDraggingHover: `inear-gradient(to right, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
 
-        contextMenuWrapperChecked: `linear-gradient(to left, ${black} 24px, #474747 24px)`,
-        contextMenuWrapperDragging:
-          "border-image-source: linear-gradient(to left, rgba(230, 211, 138, 0.12) 24px, #474747 24px)",
-        contextMenuWrapperDraggingHover:
-          "linear-gradient(to left,rgba(204, 184, 102, 0.2) 24px, #474747 24px)",
+        contextMenuWrapperChecked: `linear-gradient(to left, ${black} 24px, ${grayDarkStrong} 24px)`,
+        contextMenuWrapperDragging: `border-image-source: linear-gradient(to left, ${dndDarkColor} 24px, ${grayDarkStrong} 24px)`,
+        contextMenuWrapperDraggingHover: `linear-gradient(to left, ${dndDarkHover} 24px, ${grayDarkStrong} 24px)`,
 
-        backgroundActive: "#3D3D3D",
+        backgroundActive: lightDarkGrayHover,
 
-        borderImageCheckbox:
-          "linear-gradient(to right, #474747 24px, #474747 24px)",
-        borderImageContextMenu:
-          "linear-gradient(to left, #474747 24px, #474747 24px)",
+        borderImageCheckbox: `linear-gradient(to right, ${grayDarkStrong} 24px, ${grayDarkStrong} 24px)`,
+        borderImageContextMenu: `linear-gradient(to left, ${grayDarkStrong} 24px, ${grayDarkStrong} 24px)`,
 
-        borderHover: "#474747",
+        borderHover: grayDarkStrong,
         sideColor: gray,
 
-        shareHoverColor: "#eeeeee",
+        shareHoverColor: white,
 
-        borderImageRight:
-          "linear-gradient(to right, #333333 25px, #474747 24px)",
-        borderImageLeft: "linear-gradient(to left, #333333 20px, #474747 24px)",
+        borderImageRight: `linear-gradient(to right, ${black} 25px, ${grayDarkStrong} 24px)`,
+        borderImageLeft: `linear-gradient(to left, ${black} 20px, ${grayDarkStrong} 24px)`,
 
-        borderColor: "#474747",
-        borderColorTransition: "#474747",
+        borderColor: grayDarkStrong,
+        borderColorTransition: grayDarkStrong,
+
+        color: white,
+        backgroundGroup: grayDarkMid,
       },
     },
 
     tilesView: {
       tile: {
-        draggingColor: "rgba(230, 211, 138, 0.12)",
-        draggingHoverColor: "rgba(204, 184, 102, 0.2)",
-        checkedColor: "#3d3d3d",
+        draggingColor: dndDarkColor,
+        draggingHoverColor: dndDarkHover,
+        checkedColor: lightDarkGrayHover,
         roomsCheckedColor: black,
-        border: "1px solid #474747",
+        border: `1px solid ${grayDarkStrong}`,
         backgroundBadgeColor: black,
-        backgroundColor: "#282828",
+        backgroundColor: darkGrayLight,
         borderRadius: "6px",
         roomsBorderRadius: "12px",
         bottomBorderRadius: "0 0 6px 6px",
         roomsBottomBorderRadius: "0 0 12px 12px",
         upperBorderRadius: "6px 6px 0 0",
         roomsUpperBorderRadius: "12px 12px 0 0",
-        backgroundColorTop: "#292929",
+        backgroundColorTop: black,
       },
 
-      sideColor: grayMaxLight,
-      color: grayMaxLight,
-      textColor: "#858585",
+      sideColor: white,
+      color: white,
+      textColor: grayDark,
     },
 
-    animationColor: "rgba(82, 153, 224, 0.16)",
+    animationColor: lightSecondMain,
   },
 
   advancedSelector: {
-    footerBorder: "1px solid #474747",
+    footerBorder: `1px solid ${grayDarkStrong}`,
 
-    hoverBackgroundColor: "#474747",
-    selectedBackgroundColor: "#474747",
-    borderLeft: "1px solid #474747",
+    hoverBackgroundColor: grayDarkStrong,
+    selectedBackgroundColor: grayDarkStrong,
+    borderLeft: `1px solid ${grayDarkStrong}`,
 
     searcher: {
-      hoverBorderColor: "#858585",
-      focusBorderColor: grayMaxLight,
-      placeholderColor: "#474747",
+      hoverBorderColor: grayDark,
+      focusBorderColor: white,
+      placeholderColor: grayDarkStrong,
     },
   },
 
   selector: {
-    border: `1px solid #474747`,
+    border: `1px solid ${grayDarkStrong}`,
 
     breadCrumbs: {
-      prevItemColor: "#CCCCCC",
-      arrowRightColor: "#ADADAD",
+      prevItemColor: darkGrayDark,
+      arrowRightColor: darkGrayDark,
     },
 
     info: {
-      backgroundColor: "#282828",
-      color: "#ADADAD",
+      backgroundColor: darkGrayLight,
+      color: darkGrayDark,
     },
 
-    bodyDescriptionText: "#858585",
+    bodyDescriptionText: grayDark,
 
     item: {
-      hoverBackground: "#3d3d3d",
-      selectedBackground: "#3d3d3d",
+      hoverBackground: lightDarkGrayHover,
+      selectedBackground: lightDarkGrayHover,
 
-      inputButtonBorder: "#474747",
-      inputButtonBorderHover: grayMaxLight,
+      inputButtonBorder: grayDarkStrong,
+      inputButtonBorderHover: white,
 
-      disableTextColor: "#858585",
+      disableTextColor: grayDark,
     },
 
     emptyScreen: {
-      descriptionColor: "#ADADAD",
-      buttonColor: "#ADADAD",
-      hoverButtonColor: "#FFFFFF",
-      pressedButtonColor: "#CCCCCC",
+      descriptionColor: darkGrayDark,
+      buttonColor: darkGrayDark,
+      hoverButtonColor: white,
+      pressedButtonColor: grayDarkText,
     },
   },
 
   floatingButton: {
     backgroundColor: white,
     color: black,
-    boxShadow: "0px 12px 24px rgba(0, 0, 0, 0.12)",
+    boxShadow: `0px 12px 24px ${popupShadow}`,
     fill: black,
 
     alert: {
-      fill: "#F58D31",
+      fill: mainOrange,
       path: black,
     },
   },
 
   mediaViewer: {
-    color: "#d1d1d1",
-    background: "rgba(17, 17, 17, 0.867)",
-    backgroundColor: "rgba(11, 11, 11, 0.7)",
+    color: grayDarkStrong,
+    backgroundColor: highlandGray,
     fill: white,
     titleColor: white,
     iconColor: white,
 
     controlBtn: {
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: silver,
     },
 
     imageViewer: {
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
-      inactiveBackgroundColor: "rgba(11,11,11,0.7)",
+      backgroundColor: silver,
+      inactiveBackgroundColor: highlandGray,
       fill: white,
     },
 
     progressBar: {
-      background: "#d1d1d1",
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
+      background: grayDarkStrong,
+      backgroundColor: silver,
     },
 
     scrollButton: {
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
-      background: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: highlandGray,
+      background: silver,
       border: `solid ${white}`,
     },
 
     videoViewer: {
       fill: white,
       stroke: white,
-      color: "#d1d1d1",
+      color: grayDarkStrong,
       colorError: white,
       backgroundColorError: darkBlack,
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
-      background: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: highlandGray,
+      background: silver,
     },
   },
 
-  connectCloud: {
-    connectBtnContent: silver,
-    connectBtnTextBg: "none",
-    connectBtnIconBg: "#none",
-    connectBtnTextBorder: silver,
-    connectBtnIconBorder: "#474747",
-  },
-
   createEditRoomDialog: {
     commonParam: {
-      descriptionColor: "#a3a9ae",
-      textColor: "#858585",
+      descriptionColor: gray,
+      textColor: grayDark,
     },
 
     roomType: {
       listItem: {
         background: "none",
-        hoverBackground: "#282828",
-        borderColor: "#474747",
-        descriptionText: "#A3A9AE",
+        hoverBackground: darkGrayLight,
+        borderColor: grayDarkStrong,
+        descriptionText: gray,
       },
       dropdownButton: {
         background: "none",
-        hoverBackground: "#282828",
-        borderColor: "#474747",
-        isOpenBorderColor: "#F97A0B",
-        descriptionText: "#A3A9AE",
+        hoverBackground: darkGrayLight,
+        borderColor: grayDarkStrong,
+        descriptionText: gray,
       },
       dropdownItem: {
-        background: "#333333",
-        hoverBackground: "#282828",
-        descriptionText: "#A3A9AE",
+        background: black,
+        hoverBackground: darkGrayLight,
+        descriptionText: gray,
       },
       displayItem: {
-        background: "#282828",
-        borderColor: "#282828",
-        descriptionText: "#a3a9ae",
+        background: darkGrayLight,
+        borderColor: darkGrayLight,
+        descriptionText: gray,
       },
     },
 
     roomTypeDropdown: {
       desktop: {
-        background: "#333333",
-        borderColor: "#474747",
+        background: black,
+        borderColor: grayDarkStrong,
       },
       mobile: {
-        background: "#333333",
+        background: black,
       },
     },
 
     permanentSettings: {
-      background: "#474747",
-      isPrivateIcon: "#35ad17",
-      descriptionColor: "#a3a9ae",
+      background: grayDarkStrong,
+      isPrivateIcon: darkStatusPositive,
+      descriptionColor: gray,
     },
 
     dropdown: {
-      background: "#333333",
-      borderColor: "#474747",
+      background: black,
+      borderColor: grayDarkStrong,
       item: {
-        hoverBackground: "#282828",
+        hoverBackground: darkGrayLight,
       },
     },
 
     isPrivate: {
       limitations: {
-        background: "#474747",
-        iconColor: "#ed7309",
-        titleColor: "#ed7309",
-        descriptionColor: "#a3a9ae",
-        linkColor: "#e8e8e9",
+        background: grayDarkStrong,
+        iconColor: lightStatusWarning,
+        titleColor: lightStatusWarning,
+        descriptionColor: gray,
+        linkColor: grayDarkText,
       },
     },
 
     thirdpartyStorage: {
       combobox: {
-        background: "#292929",
-        dropdownBorderColor: "#474747",
-        hoverDropdownBorderColor: "#858585",
-        isOpenDropdownBorderColor: "#e8e8e9",
-        arrowFill: "#474747",
+        background: black,
+        dropdownBorderColor: grayDarkStrong,
+        hoverDropdownBorderColor: grayDark,
+        isOpenDropdownBorderColor: grayDarkText,
+        arrowFill: grayDarkStrong,
       },
       folderInput: {
-        background: "#292929",
-        borderColor: "#474747",
-        hoverBorderColor: "#858585",
-        focusBorderColor: "#e8e8e9",
-        rootLabelColor: "#a3a9ae",
-        iconFill: "#657177",
+        background: black,
+        borderColor: grayDarkStrong,
+        hoverBorderColor: grayDark,
+        rootLabelColor: gray,
+        iconFill: darkGrayDark,
       },
     },
 
     iconCropper: {
-      gridColor: "#333333",
+      gridColor: black,
       deleteButton: {
-        background: "#292929",
-        hoverBackground: "#333333",
-        borderColor: "#292929",
-        hoverBorderColor: "#fafafa",
-        color: "#858585",
-        iconColor: "#858585",
+        background: black,
+        hoverBackground: black,
+        borderColor: gray,
+        hoverBorderColor: lightDarkGrayHover,
+        color: grayDark,
+        iconColor: darkGrayDark,
       },
     },
 
     previewTile: {
-      background: "#292929",
-      borderColor: "#474747",
-      iconBorderColor: "#eceef1",
+      background: black,
+      borderColor: grayDarkStrong,
+      iconBorderColor: grayLightMid,
     },
 
     dropzone: {
-      borderColor: "#474747",
-      linkMainColor: "#F97A0B",
-      linkSecondaryColor: "#ffffff",
-      exstsColor: "#a3a9ae",
+      borderColor: grayDarkStrong,
+      linkMainColor: link,
+      linkSecondaryColor: white,
+      exstsColor: gray,
+    },
+    helpButton: {
+      background: grayDark,
+      fill: white,
     },
   },
 
+  createEditGroupDialog: {
+    textColor: grayDark,
+    iconFill: grayDark,
+  },
+
   filesThirdPartyDialog: {
-    border: "1px solid #474747",
+    border: `1px solid ${grayDarkStrong}`,
   },
 
   connectedClouds: {
-    color: "#eeeeee",
-    borderBottom: `1px solid #474747`,
-    borderRight: `1px solid #474747`,
+    color: white,
+    borderBottom: `1px solid ${grayDarkStrong}`,
+    borderRight: `1px solid ${grayDarkStrong}`,
   },
 
   filesModalDialog: {
-    border: `1px solid #474747`,
+    border: `1px solid ${grayDarkStrong}`,
   },
 
   filesDragTooltip: {
     background: black,
-    boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
-    color: grayMaxLight,
+    boxShadow: `0px 5px 20px ${popupShadow}`,
+    color: white,
   },
 
   emptyContent: {
     header: {
-      color: "#FFFFFF",
+      color: white,
     },
 
     description: {
-      color: "#ADADAD",
+      color: darkGrayDark,
     },
     button: {
-      colorLink: "#ADADAD",
-      colorText: "#ADADAD",
+      colorLink: darkGrayDark,
+      colorText: darkGrayDark,
     },
   },
 
   emptyView: {
     items: {
-      hoverColor: charlestonGreen,
-      pressColor: outerSpace,
+      hoverColor: darkGrayLight,
+      pressColor: grayDarkStrong,
     },
   },
 
   filesEmptyContainer: {
-    linkColor: "#adadad",
+    linkColor: darkGrayDark,
     privateRoom: {
-      linkColor: "#E06A1B",
+      linkColor: darkLink,
     },
+    descriptionColor: darkGrayDark,
   },
 
   filesPanels: {
-    color: grayMaxLight,
+    color: white,
 
     aside: {
       backgroundColor: black,
@@ -2607,6 +2377,7 @@ const Dark: TTheme = {
     addUsers: {
       iconColor: gray,
       arrowColor: darkBlack,
+      textColor: grayDark,
     },
 
     changeOwner: {
@@ -2615,82 +2386,76 @@ const Dark: TTheme = {
     },
 
     embedding: {
-      textAreaColor: "#858585",
-      iconColor: grayMaxLight,
+      textAreaColor: grayDark,
+      iconColor: white,
       color: gray,
+      border: `1px solid ${grayDarkMid}`,
+      linkBackground: blueLightMid,
+      linkColor: white,
     },
 
     versionHistory: {
-      borderTop: "1px solid #474747",
+      borderTop: `1px solid ${grayDarkStrong}`,
     },
 
     content: {
       backgroundColor: black,
-      fill: grayMaxLight,
-      disabledFill: "#5c5c5c",
+      fill: white,
+      disabledFill: grayDarkText,
     },
 
     body: {
       backgroundColor: black,
-      fill: grayMaxLight,
+      fill: white,
     },
 
     footer: {
       backgroundColor: black,
-      borderTop: "1px solid #474747",
+      borderTop: `1px solid ${grayDarkStrong}`,
     },
 
     linkRow: {
       backgroundColor: black,
-      fill: grayMaxLight,
-      disabledFill: "#5c5c5c",
+      fill: white,
+      disabledFill: grayDarkText,
     },
 
     selectFolder: {
       color: gray,
     },
 
-    selectFile: {
-      color: gray,
-      background: black,
-      borderBottom: "1px solid #474747",
-      borderRight: "1px solid #474747",
-
-      buttonsBackground: black,
-    },
-
     filesList: {
-      color: grayMaxLight,
+      color: white,
       backgroundColor: black,
-      borderBottom: "1px solid #474747",
+      borderBottom: `1px solid ${grayDarkStrong}`,
     },
 
     modalRow: {
       backgroundColor: black,
       fill: gray,
-      disabledFill: "#5c5c5c",
+      disabledFill: grayDarkText,
     },
 
     sharing: {
-      color: grayMaxLight,
+      color: white,
 
-      fill: grayMaxLight,
-      loadingFill: grayMaxLight,
+      fill: white,
+      loadingFill: white,
 
-      borderBottom: "1px solid #474747",
-      borderTop: "1px solid #474747",
-      externalLinkBackground: "#292929",
-      externalLinkSvg: "#eeeeee",
+      borderBottom: `1px solid ${grayDarkStrong}`,
+      borderTop: `1px solid ${grayDarkStrong}`,
+      externalLinkBackground: black,
+      externalLinkSvg: white,
 
-      internalLinkBorder: "1px dashed #eeeeee",
+      internalLinkBorder: `1px dashed ${white}`,
 
-      itemBorder: "1px dashed #333333",
+      itemBorder: `1px dashed ${black}`,
 
-      itemOwnerColor: "#858585",
+      itemOwnerColor: grayDark,
 
-      backgroundButtons: "#333333",
+      backgroundButtons: black,
 
-      dropdownColor: grayMaxLight,
+      dropdownColor: white,
 
       loader: {
         foregroundColor: black,
@@ -2700,19 +2465,24 @@ const Dark: TTheme = {
 
     upload: {
       color: black,
-      tooltipColor: "#F5E9BA",
+      tooltipColor: darkToastInfo,
       iconColor: darkErrorStatus,
 
       shareButton: {
         color: gray,
-        sharedColor: grayMain,
+        sharedColor: lightGrayDark,
       },
 
       loadingButton: {
-        color: "#eeeeee",
+        color: white,
         background: black,
       },
     },
+    invite: {
+      textColor: grayDark,
+      addButtonColor: lightBlueMain,
+      border: `1px solid ${grayDarkStrong}`,
+    },
   },
 
   menuItem: {
@@ -2725,7 +2495,7 @@ const Dark: TTheme = {
       },
     },
     separator: {
-      borderBottom: `1px solid #474747 !important`,
+      borderBottom: `1px solid ${grayDarkStrong} !important`,
       margin: "6px 16px 6px 16px !important",
       height: "1px !important",
       width: "calc(100% - 32px) !important",
@@ -2743,14 +2513,14 @@ const Dark: TTheme = {
       lineHeight: "30px",
       fontWeight: "600",
       margin: "0 0 0 8px",
-      color: "#eeeeee",
+      color: white,
     },
     hover: black,
     background: "none",
-    svgFill: "#eeeeee",
+    svgFill: white,
     header: {
       height: "49px",
-      borderBottom: `1px solid #474747`,
+      borderBottom: `1px solid ${grayDarkStrong}`,
       marginBottom: "6px",
     },
     height: "30px",
@@ -2766,9 +2536,9 @@ const Dark: TTheme = {
     background: black,
     borderRadius: "6px",
     mobileBorderRadius: "6px 6px 0 0",
-    boxShadow: "0px 8px 16px 0px #040F1B29",
+    boxShadow: `0px 8px 16px 0px ${boxShadowDarkColor}`,
     padding: "6px 0px",
-    border: "1px solid #474747",
+    border: `1px solid ${grayDarkStrong}`,
     devices: {
       maxHeight: "calc(100vh - 64px)",
       tabletWidth: "375px",
@@ -2780,102 +2550,109 @@ const Dark: TTheme = {
     },
   },
   filesSettings: {
-    color: cyanBlueDarkShade,
+    color: grayText,
 
-    linkColor: grayMaxLight,
+    linkColor: white,
   },
 
   filesBadges: {
-    iconColor: "#858585",
-    hoverIconColor: grayMaxLight,
+    iconColor: grayDark,
+    hoverIconColor: white,
 
     color: white,
     backgroundColor: black,
 
     badgeColor: black,
-    badgeBackgroundColor: "#858585",
+    badgeBackgroundColor: grayDark,
+  },
+
+  accountsBadges: {
+    pendingColor: grayDark,
+    disabledColor: darkErrorStatus,
   },
 
   filesEditingWrapper: {
-    color: grayMaxLight,
-    border: "1px solid #474747",
-    borderBottom: "1px solid #474747",
+    color: white,
+    border: `1px solid ${grayDarkStrong}`,
+    borderBottom: `1px solid ${grayDarkStrong}`,
 
     tile: {
       background: globalColors.black,
-      itemBackground: "#242424",
+      itemBackground: grayDarkMid,
       itemBorder: gray,
-      itemActiveBorder: "#eeeeee",
+      itemActiveBorder: white,
     },
 
     row: {
       itemBackground: globalColors.black,
     },
 
-    fill: "#858585",
-    hoverFill: "#eeeeee",
+    fill: grayDark,
+    hoverFill: white,
+    disabledBackground: white,
   },
 
   filesIcons: {
-    fill: "#858585",
-    hoverFill: "#eeeeee",
+    fill: grayDark,
+    hoverFill: white,
   },
 
   filesQuickButtons: {
-    color: "#858585",
-    sharedColor: "#eeeeee",
-    hoverColor: "#eeeeee",
+    color: grayDark,
+    sharedColor: white,
+    hoverColor: white,
   },
 
   filesSharedButton: {
-    color: "#858585",
-    sharedColor: "#eeeeee",
+    color: grayDark,
+    sharedColor: white,
   },
 
   filesPrivateRoom: {
-    borderBottom: "1px solid #d3d3d3",
-    linkColor: "#E06A1B",
-    textColor: "#83888D",
+    borderBottom: `1px solid ${grayDarkMid}`,
+    linkColor: darkLink,
+    textColor: grayDarkText,
   },
 
   filesVersionHistory: {
     row: {
-      color: grayMaxLight,
-      fill: grayMaxLight,
+      color: white,
+      fill: white,
     },
 
     badge: {
       color: black,
-      stroke: "#ADADAD",
-      fill: "#ADADAD",
+      stroke: darkGrayDark,
+      fill: darkGrayDark,
       defaultFill: black,
-      badgeFill: "#F58D31",
+      badgeFill: mainOrange,
     },
 
     versionList: {
-      fill: grayMaxLight,
-      stroke: grayMaxLight,
-      color: grayMaxLight,
+      fill: white,
+      stroke: white,
+      color: white,
     },
+    commentColor: grayDark,
   },
 
   login: {
-    linkColor: "#E06A1B",
-    textColor: "#858585",
-    navBackground: "#282828",
+    linkColor: darkLink,
+    textColor: grayDark,
+    navBackground: darkGrayLight,
     headerColor: white,
-    helpButton: "#D8D8D8",
-    orLineColor: "#474747",
-    orTextColor: "#858585",
+    helpButton: grayDark,
+    orLineColor: grayDarkStrong,
+    orTextColor: grayDark,
     titleColor: white,
 
     register: {
-      backgroundColor: "#292929",
-      textColor: "#E06A1B",
+      backgroundColor: black,
+      textColor: darkLink,
     },
 
     container: {
-      backgroundColor: "#474747",
+      backgroundColor: grayDarkStrong,
     },
 
     captcha: {
@@ -2884,56 +2661,52 @@ const Dark: TTheme = {
     },
 
     backTitle: {
-      color: "#A3A9AE",
+      color: gray,
     },
   },
 
-  facebookButton: {
-    background: black,
-    border: "1px solid #474747",
-    color: grayMaxLight,
-  },
-
   peopleSelector: {
-    textColor: grayMaxLight,
+    textColor: white,
   },
 
   peopleWithContent: {
-    color: "#858585",
-    pendingColor: "#474747",
+    color: grayDark,
+    pendingColor: grayDarkStrong,
   },
 
   peopleDialogs: {
     modal: {
-      border: "1px solid #474747",
+      border: `1px solid ${grayDarkStrong}`,
     },
 
     deleteUser: {
-      textColor: red,
+      textColor: darkErrorStatus,
     },
 
     deleteSelf: {
-      linkColor: "#e06a1b",
+      linkColor: darkLink,
     },
 
     changePassword: {
-      linkColor: "#e06a1b",
+      linkColor: darkLink,
     },
   },
 
   downloadDialog: {
-    background: "#282828",
+    background: darkGrayLight,
+    textColor: grayDark,
+    iconFill: black,
   },
 
   client: {
     about: {
-      linkColor: "#E06A1B",
-      border: "1px solid #474747",
+      linkColor: darkLink,
+      border: `1px solid ${grayDarkStrong}`,
       logoColor: white,
     },
 
     comingSoon: {
-      linkColor: "#858585",
+      linkColor: grayDark,
       linkIconColor: black,
       backgroundColor: black,
       foregroundColor: black,
@@ -2941,210 +2714,247 @@ const Dark: TTheme = {
 
     confirm: {
       activateUser: {
-        textColor: "#E06A1B",
-        textColorError: red,
+        textColor: darkLink,
+        textColorError: darkErrorStatus,
       },
       change: {
-        titleColor: "#E06A1B",
+        titleColor: darkLink,
       },
     },
 
     home: {
-      logoColor: "rgba(255, 255, 255, 0.92)",
-      textColorError: red,
+      logoColor: white,
+      textColorError: darkErrorStatus,
     },
 
     payments: {
-      linkColor: "#E06A1B",
-      delayColor: "#F21C0E",
-    },
-
-    paymentsEnterprise: {
-      background: black,
-
-      buttonBackground: "#292929",
-
-      linkColor: "#E06A1B",
-      headerColor: orangePressed,
+      linkColor: darkLink,
+      delayColor: darkErrorStatus,
     },
 
     settings: {
       iconFill: white,
-      headerTitleColor: "#FFFFFF",
-      trashIcon: "#858585",
+      headerTitleColor: white,
+      descriptionColor: grayDarkText,
+      trashIcon: grayDark,
       article: {
-        titleColor: "#c4c4c4",
-        fillIcon: "#c4c4c4",
-        expanderColor: "#c4c4c4",
+        titleColor: grayStrong,
+        fillIcon: grayStrong,
+        expanderColor: grayStrong,
       },
 
-      separatorBorder: "1px solid #474747",
+      separatorBorder: `1px solid ${grayDarkStrong}`,
 
       security: {
         arrowFill: white,
-        descriptionColor: "#858585",
+        descriptionColor: grayDark,
+
+        tfa: {
+          textColor: grayDark,
+        },
 
         admins: {
           backgroundColor: black,
-          backgroundColorWrapper: blueMain,
-          roleColor: grayMid,
+          backgroundColorWrapper: lightSecondMain,
+          roleColor: grayStrong,
 
-          color: "#E06A1B",
-          departmentColor: "#858585",
+          color: darkLink,
+          departmentColor: grayDark,
 
-          tooltipColor: "#F5E9BA",
+          tooltipColor: darkToastInfo,
 
-          nameColor: grayMaxLight,
-          pendingNameColor: "#858585",
+          nameColor: white,
+          pendingNameColor: grayDark,
 
           textColor: black,
-          iconColor: blueMain,
+          iconColor: lightSecondMain,
         },
 
         owner: {
           backgroundColor: black,
-          linkColor: "#E06A1B",
-          departmentColor: "#858585",
-          tooltipColor: "#F5E9BA",
+          linkColor: darkLink,
+          departmentColor: grayDark,
+          tooltipColor: darkToastInfo,
         },
         auditTrail: {
-          sideColor: "#858585",
-          nameColor: "#eeeeee",
-          downloadReportDescriptionColor: "#858585",
+          sideColor: grayDark,
+          nameColor: white,
+          downloadReportDescriptionColor: grayDark,
         },
         loginHistory: {
-          sideColor: "#858585",
-          nameColor: "#eeeeee",
+          sideColor: grayDark,
+          nameColor: white,
+          textColor: grayDark,
+          subheaderColor: darkGrayDark,
+        },
+        ip: {
+          errorColor: darkErrorStatus,
         },
       },
 
       common: {
-        linkColor: "#858585",
-        linkColorHelp: "#E06A1B",
-        tooltipLinkColor: "#e06a1b",
+        linkColor: grayDark,
+        linkColorHelp: darkLink,
+        tooltipLinkColor: darkLink,
         arrowColor: white,
-        descriptionColor: "#ADADAD",
-        brandingDescriptionColor: "#858585",
+        descriptionColor: grayDark,
+        brandingDescriptionColor: grayDark,
+
+        appearance: {
+          themeAddBackground: grayDarkStrong,
+          accentBoxBackground: grayDarkStrong,
+          buttonBoxBackground: grayDarkStrong,
+          iconFill: grayDark,
+          addThemeBackground: grayDarkStrong,
+        },
 
         whiteLabel: {
-          borderImg: "1px solid #474747",
+          borderImg: `1px solid ${grayDarkStrong}`,
 
           backgroundColorWhite: white,
-          backgroundColorLight: "#F8F9F9",
-          backgroundColorDark: "#282828",
-          greenBackgroundColor: "#40865C",
-          blueBackgroundColor: "#446995",
-          orangeBackgroundColor: "#BE6650",
-          redBackgroundColor: "#AA5251",
+          backgroundColorLight: grayLight,
+          backgroundColorDark: darkGrayLight,
+          greenBackgroundColor: editorGreenColor,
+          blueBackgroundColor: editorBlueColor,
+          orangeBackgroundColor: editorOrangeColor,
+          redBackgroundColor: editorRedColor,
 
           dataFontColor: white,
           dataFontColorBlack: white,
         },
+
+        companyInfo: {
+          border: `1px dashed ${white}`,
+          color: grayDark,
+        },
+
+        dns: {
+          errorColor: darkErrorStatus,
+        },
       },
 
       integration: {
-        separatorBorder: "1px solid #474747",
-        linkColor: "#E06A1B",
-
+        separatorBorder: `1px solid ${grayDarkStrong}`,
+        linkColor: darkLink,
+        textColor: grayDark,
         sso: {
-          toggleContentBackground: "#474747",
+          textColor: grayDark,
+          toggleContentBackground: grayDarkStrong,
           iconButton: white,
-          iconButtonDisabled: "#333",
-          border: "1px solid #474747",
+          iconButtonDisabled: black,
+          border: `1px solid ${grayDarkStrong}`,
+        },
+        ldap: {
+          border: `1px solid ${grayDarkStrong}`,
+          errorBorder: `1px solid ${darkErrorStatus}`,
+          certificateBackground: grayDarkStrong,
+          textColor: grayDark,
+          errorColor: darkErrorStatus,
         },
-
         smtp: {
-          requirementColor: "#E06451",
+          requirementColor: darkErrorStatus,
         },
       },
 
       backup: {
-        rectangleBackgroundColor: "#3D3D3D",
-        separatorBorder: "1px solid #474747",
-        warningColor: "#E06451",
-        textColor: "#ADADAD",
-        backupCheckedListItemBackground: "#3D3D3D",
+        rectangleBackgroundColor: lightDarkGrayHover,
+        separatorBorder: `1px solid ${grayDarkStrong}`,
+        warningColor: darkErrorStatus,
+        textColor: darkGrayDark,
+        backupCheckedListItemBackground: lightDarkGrayHover,
       },
 
       payment: {
-        priceColor: "#ADADAD",
-        storageSizeTitle: "#A3A9AE",
+        priceColor: darkGrayDark,
+        storageSizeTitle: gray,
 
-        backgroundColor: "#282828",
-        linkColor: "#316DAA",
-        tariffText: "#858585",
-        border: "1px solid #474747",
-        backgroundBenefitsColor: "#3333",
-        rectangleColor: "#3D3D3D",
+        backgroundColor: darkGrayLight,
+        linkColor: link,
+        tariffText: grayDark,
+        border: `1px solid ${grayDarkStrong}`,
+        backgroundBenefitsColor: black,
+        rectangleColor: lightDarkGrayHover,
 
         priceContainer: {
-          backgroundText: "#3D3D3D",
-          background: "#282828",
-          border: "1px solid #282828",
-          featureTextColor: "#858585",
-          disableColor: "#858585",
-          trackNumberColor: "#858585",
-          disablePriceColor: "#5C5C5C",
+          backgroundText: lightDarkGrayHover,
+          background: darkGrayLight,
+          border: `1px solid ${darkGrayLight}`,
+          featureTextColor: grayDark,
+          disableColor: grayDark,
+          trackNumberColor: grayDark,
+          disablePriceColor: grayDarkText,
         },
 
         benefitsContainer: {
-          iconsColor: "#858585",
+          iconsColor: grayDark,
         },
         contactContainer: {
-          textColor: "#ADADAD",
-          linkColor: "#858585",
+          textColor: darkGrayDark,
+          linkColor: grayDark,
         },
-        warningColor: "#E06451",
-        color: "#E17415",
+        warningColor: darkErrorStatus,
+        color: darkStatusWarning,
       },
 
       migration: {
-        descriptionColor: "#ADADAD",
-        subtitleColor: "#FFFFFF",
-        workspaceBackground: "#333333",
-        workspaceBorder: "1px solid #474747",
-        stepDescriptionColor: "#FFFFFF",
-        fileInputIconColor: "#5c5c5c",
-        infoBlockBackground: "#282828",
-        infoBlockTextColor: "#858585",
-        errorTextColor: "#E06451",
-        existingTextColor: "#3BA420",
-        tableHeaderText: "#858585",
-        tableRowHoverColor: "#3D3D3D",
-        tableRowTextColor: "#858585",
-        comboBoxLabelColor: "#FFFFFF",
-        importSectionBackground: "#282828",
-        importSectionTextColor: "#858585",
-        importItemBackground: "#333333",
-        importItemDisableBackground: "#3D3D3D",
-        importItemTextColor: "#ADADAD",
-        importItemDisableTextColor: "#5C5C5C",
-        importItemDescription: "#A3A9AE",
-        importIconColor: "#a9a9a9",
-        groupMenuBackground: "#333333",
-        groupMenuBorder: "1px solid #474747",
-        groupMenuBoxShadow: "rgba(0, 0, 0, 0.16) 0px 5px 5px 0px",
+        descriptionColor: darkGrayDark,
+        subtitleColor: white,
+        workspaceBackground: black,
+        workspaceBorder: `1px solid ${grayDarkStrong}`,
+        workspaceHover: lightBlueMain,
+        stepDescriptionColor: white,
+        fileInputIconColor: grayDarkText,
+        infoBlockBackground: darkGrayLight,
+        infoBlockTextColor: grayDark,
+        errorTextColor: darkErrorStatus,
+        existingTextColor: darkStatusPositive,
+        tableHeaderText: grayDark,
+        tableRowHoverColor: lightDarkGrayHover,
+        tableRowTextColor: grayDark,
+        comboBoxLabelColor: white,
+        importSectionBackground: darkGrayLight,
+        importSectionTextColor: grayDark,
+        importItemBackground: black,
+        importItemDisableBackground: lightDarkGrayHover,
+        importItemTextColor: darkGrayDark,
+        importItemDisableTextColor: grayDarkText,
+        importItemDescription: gray,
+        importIconColor: darkGrayDark,
+        groupMenuBackground: black,
+        groupMenuBorder: `1px solid ${grayDarkStrong}`,
+        groupMenuBoxShadow: `${menuShadow} 0px 5px 5px 0px`,
+        linkColor: lightBlueMain,
+        background: darkGrayLight,
       },
       storageManagement: {
-        grayBackgroundText: "#858585",
-        descriptionColor: "#ADADAD",
+        grayBackgroundText: grayDark,
+        descriptionColor: darkGrayDark,
+        dividerColor: grayDarkMid,
+      },
+      deleteData: {
+        borderTop: `1px solid ${grayDarkMid}`,
+      },
+      webhooks: {
+        border: `1px solid ${grayDarkMid}`,
+        historyRowBackground: lightDarkGrayHover,
+        tableCellBackground: lightGrayHover,
+        barBackground: lightDarkGrayHover,
+        color: grayDark,
+        linkColor: lightBlueMain,
+        spanBackground: lightBlueMain,
+        filterBorder: `1px solid ${black}`,
+        toastBackground: darkToastWarning,
+        background: darkGrayLight,
       },
     },
 
     wizard: {
-      linkColor: "#E06A1B",
-      generatePasswordColor: "#a9a9a9",
+      linkColor: darkLink,
+      generatePasswordColor: darkGrayDark,
+      textColor: grayDark,
     },
   },
 
-  campaignsBanner: {
-    border: "1px solid #CCCCCC",
-    color: darkBlack,
-
-    btnColor: black,
-    btnBackgroundActive: blueMain,
-  },
-
   tileLoader: {
     border: `none`,
 
@@ -3153,194 +2963,211 @@ const Dark: TTheme = {
 
   errorContainer: {
     background: black,
-    bodyText: "#858585",
+    bodyText: grayDark,
+    linkColor: darkLink,
   },
 
   editor: {
-    color: "#eeeeee",
+    color: white,
     background: black,
   },
 
   tabs: {
     gradientColor: black,
-    lineColor: "#474747",
+    lineColor: grayDarkStrong,
 
-    textColorPrimary: "#ADADAD",
+    textColorPrimary: darkGrayDark,
     activeTextColorPrimary: white,
     hoverTextColorPrimary: white,
-    pressedTextColorPrimary: "#CCCCCC",
-    backgroundColorPrimary: "#333",
+    pressedTextColorPrimary: grayDarkText,
+    backgroundColorPrimary: black,
 
-    textColorSecondary: "#FFFFFF",
-    activeTextColorSecondary: "#333333",
+    textColorSecondary: white,
+    activeTextColorSecondary: black,
 
-    backgroundColorSecondary: "#333",
-    hoverBackgroundColorSecondary: "#474747",
-    pressedBackgroundColorSecondary: "#282828",
-    activeBackgroundColorSecondary: "#FFFFFF",
+    backgroundColorSecondary: black,
+    hoverBackgroundColorSecondary: grayDarkStrong,
+    pressedBackgroundColorSecondary: darkGrayLight,
+    activeBackgroundColorSecondary: white,
   },
 
   hotkeys: {
     key: {
-      color: "#C4C4C4",
+      color: grayStrong,
     },
   },
 
   tag: {
     color: white,
-    deletedColor: "#A3A9AE",
-    background: "#474747",
-    hoverBackground: "#282828",
-    disabledBackground: "#858585",
-    deletedBackground: "#282828",
+    deletedColor: gray,
+    background: grayDarkStrong,
+    hoverBackground: darkGrayLight,
+    disabledBackground: grayDark,
+    deletedBackground: darkGrayLight,
     defaultTagColor: white,
-    newTagBackground: "#242424",
-    newTagHoverBackground: "#3D3D3D",
+    newTagBackground: grayDarkMid,
+    newTagHoverBackground: lightDarkGrayHover,
   },
 
   profile: {
     main: {
-      background: "#3D3D3D",
+      background: lightDarkGrayHover,
       textColor: white,
 
-      descriptionTextColor: "#858585",
-      pendingEmailTextColor: "#858585",
+      descriptionTextColor: grayDark,
+      pendingEmailTextColor: grayDark,
 
-      mobileRowBackground: "#3D3D3D",
+      mobileRowBackground: lightDarkGrayHover,
+
+      iconFill: darkGrayDark,
+      mobileLabel: grayDark,
+    },
+    login: {
+      textColor: grayDark,
     },
     themePreview: {
-      descriptionColor: "#ADADAD",
-      border: "1px solid #474747",
+      descriptionColor: darkGrayDark,
+      border: `1px solid ${grayDarkStrong}`,
     },
     notifications: {
-      textDescriptionColor: "#858585",
+      textDescriptionColor: grayDark,
     },
     activeSessions: {
-      color: "#eeeeee",
-      borderColor: "#474747",
-      tickIconColor: "#3BA420",
-      removeIconColor: "#A3A9AE",
-      sortHeaderColor: "#474747",
-      tableCellColor: "#858585",
-      dividerColor: "#474747",
+      color: white,
+      borderColor: grayDarkStrong,
+      tickIconColor: darkStatusPositive,
+      removeIconColor: gray,
+      sortHeaderColor: grayDarkStrong,
+      tableCellColor: grayDark,
+      dividerColor: grayDarkStrong,
     },
   },
 
   formWrapper: {
     background: black,
-    boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.16);",
+    boxShadow: `0px 5px 20px ${badgeShadow}`,
   },
 
   preparationPortalProgress: {
-    backgroundColor: "#282828",
-    colorPercentSmall: "#FFFFFF",
-    colorPercentBig: "#333333",
-    errorTextColor: "#E06451",
-    descriptionTextColor: "#858585",
+    backgroundColor: darkGrayLight,
+    colorPercentSmall: white,
+    colorPercentBig: black,
+    errorTextColor: darkErrorStatus,
+    descriptionTextColor: grayDark,
   },
 
   codeInput: {
-    background: "#282828",
-    border: "1px solid #474747",
+    background: darkGrayLight,
+    border: `1px solid ${grayDarkStrong}`,
     color: white,
-    lineColor: "#858585",
-    disabledBackground: "#474747",
-    disabledBorder: "1px solid #474747",
-    disabledColor: "#858585",
+    lineColor: grayDark,
+    disabledBackground: grayDarkStrong,
+    disabledBorder: `1px solid ${grayDarkStrong}`,
+    disabledColor: grayDark,
+    focusBorder: `1px solid ${lightSecondMain}`,
   },
 
   accessRightSelect: {
-    descriptionColor: "#858585",
+    descriptionColor: grayDark,
   },
 
   itemIcon: {
-    borderColor: "#474747",
+    borderColor: grayDarkStrong,
   },
 
   invitePage: {
-    borderColor: "#474747",
+    borderColor: grayDarkStrong,
+    textColor: grayDark,
   },
 
   portalUnavailable: {
-    textDescriptionColor: "#858585",
+    textDescriptionColor: grayDark,
   },
 
   deepLink: {
-    navBackground: "#282828",
-    fileTileBackground: "#3D3D3D",
+    navBackground: darkGrayLight,
+    fileTileBackground: lightDarkGrayHover,
   },
 
   emailChips: {
-    borderColor: "#858585",
-    dashedBorder: "1px dashed #fff",
+    borderColor: grayDark,
+    dashedBorder: `1px dashed ${white}`,
   },
 
   dialogs: {
-    disableText: "#858585",
+    disableText: grayDark,
+    errorText: darkErrorStatus,
+    linkColor: lightBlueMain,
+    borderColor: grayDarkMid,
   },
 
   editLink: {
     text: {
-      color: "#A3A9AE",
-      errorColor: "#F21C0E",
+      color: gray,
+      errorColor: darkErrorStatus,
     },
+    requiredColor: darkErrorStatus,
   },
 
   oformGallery: {
     errorView: {
-      subHeaderTextColor: "#ADADAD",
+      subHeaderTextColor: darkGrayDark,
     },
     submitToGalleryTile: {
-      bodyText: "#ADADAD",
-      closeIconFill: "#a9a9a9",
+      bodyText: darkGrayDark,
+      closeIconFill: darkGrayDark,
     },
   },
 
   infoBlock: {
-    background: "#282828",
-    headerColor: "#FFF",
-    descriptionColor: "#ADADAD",
+    background: darkGrayLight,
+    headerColor: white,
+    descriptionColor: darkGrayDark,
   },
 
   infoBar: {
-    background: "#282828",
+    background: darkGrayLight,
     title: white,
-    description: "#ADADAD",
+    description: darkGrayDark,
+    textColor: white,
+    iconFill: darkStatusWarning,
   },
 
   roomIcon: {
-    backgroundArchive: "#FFFFFF",
+    backgroundArchive: white,
     opacityBackground: "0.1",
   },
 
   plugins: {
-    borderColor: "#474747",
-    pluginName: "#A3A9AE",
-    descriptionColor: "#ADADAD",
+    borderColor: grayDarkStrong,
+    pluginName: gray,
+    descriptionColor: darkGrayDark,
+    color: grayDark,
   },
 
   oauth: {
     previewDialog: {
-      border: "1px solid #242424",
+      border: `1px solid ${grayDarkMid}`,
     },
     infoDialog: {
-      descLinkColor: "#adadad",
-      blockHeaderColor: "#858585",
-      separatorColor: "#474747",
+      descLinkColor: darkGrayDark,
+      blockHeaderColor: grayDark,
+      separatorColor: grayDarkStrong,
     },
     list: {
-      descriptionColor: "#858585",
+      descriptionColor: grayDark,
     },
     clientForm: {
-      descriptionColor: "#858585",
-      headerBorder: "1px solid #474747",
-      scopeDesc: "#858585",
+      descriptionColor: grayDark,
+      headerBorder: `1px solid ${grayDarkStrong}`,
+      scopeDesc: grayDark,
     },
   },
   sdkPresets: {
-    borderColor: "#474747",
-    secondaryColor: "#ADADAD",
-    previewBackgroundColor: "#3D3D3D",
+    borderColor: grayDarkStrong,
+    secondaryColor: darkGrayDark,
+    previewBackgroundColor: lightDarkGrayHover,
+    linkHelpColor: darkGrayDark,
   },
 
   sideBarRow: {
@@ -3349,22 +3176,33 @@ const Dark: TTheme = {
   },
 
   dateTimePicker: {
-    colorClockIcon: "#ADADAD",
+    colorClockIcon: darkGrayDark,
   },
 
   embeddingPanel: {
-    descriptionTextColor: "#ADADAD",
-    iconColor: "#ADADAD",
+    descriptionTextColor: darkGrayDark,
+    iconColor: darkGrayDark,
   },
   completedForm: {
     linkColor: white,
-    descriptionColor: globalColors.silverChalice,
+    descriptionColor: darkGrayDark,
+    labelColor: darkGrayDark,
 
-    labelColor: globalColors.silverChalice,
     box: {
-      background: globalColors.charlestonGreen,
+      background: darkGrayLight,
     },
   },
+
+  management: {
+    textColor: grayDark,
+    errorColor: darkErrorStatus,
+    sideColor: grayDark,
+    nameColor: grayDarkStrong,
+  },
+
+  publicRoom: {
+    border: `1px solid ${lightGraySelected}`,
+  },
 };
 
 export default Dark;
diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts
index e5b80a51ea..209796787f 100644
--- a/packages/shared/themes/globalColors.ts
+++ b/packages/shared/themes/globalColors.ts
@@ -25,71 +25,119 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 export const globalColors = {
-  black: "#333",
-  charlestonGreen: "#282828",
+  white: "#ffffff",
+  black: "#333333",
   darkBlack: "#000",
-  white: "#FFF",
-  whiteSolitude: "#E4E7EB",
+
+  lightGrayBlackout: "rgba(6, 22, 38, 0.2)",
+  darkGrayBlackout: "rgba(27, 27, 27, 0.4)",
   grayLight: "#F8F9F9",
-  grayMaxLight: "#eeeeee",
+  darkGrayLight: "#282828",
+  lightGrayHover: "#F3F4F4",
+  lightDarkGrayHover: "#3D3D3D",
   grayLightMid: "#ECEEF1",
-  graySilver: "#D8D8D8",
-  grayMid: "#D0D5DA",
   grayDarkMid: "#242424",
-  grayDark: "#858585",
+  lightGraySelected: "#DFE2E3",
+  grayStrong: "#D0D5DA",
+  grayDarkStrong: "#474747",
   gray: "#A3A9AE",
-  grayMain: "#657077",
+  grayDark: "#858585",
+  lightGrayDark: "#657077",
+  darkGrayDark: "#ADADAD",
+  grayText: "#555F65",
+  grayDarkText: "#5C5C5C",
 
-  shuttleGrey: "#63686A",
-  veryLightGrey: "#CACACA",
-  darkSilver: "#bbb",
-  silver: "#CCCCCC",
-  lightHover: "#F3F4F4",
-  veryDarkGrey: "#3D3D3D",
+  lightBlueMain: "#4781D1",
+  lightBlueMainHover: "rgba(71, 129, 209, 0.85)",
+  lightBlueMainDisabled: "rgba(71, 129, 209, 0.6)",
+  lightBlueMainPressed: "#4074bc",
+  lightSecondMain: "#5299E0",
+  lightSecondMainHover: "rgba(82, 153, 224, 0.85)",
+  lightSecondMainDisabled: "rgba(82, 153, 224, 0.6)",
 
-  blueMain: "#2DA7DB",
-  blueHover: "#3DB8EC",
-  blueActive: "#1F97CA",
-  blueDisabled: "#A6DCF2",
-  blueCharcoal: "#1F2933",
-  blueLightMid: "#265A8F",
-  strongBlue: "#316AC5",
-
-  blueDenim: "#5299E0",
-  blueDenimTransparent: "rgba(82, 153, 224, 0.85)",
-  blueMaya: "#4A8ACA",
-  blueSky: "#96C1EC",
-
-  lightGrayishBlue: "#DEE2E6",
-  lightGrayishStrongBlue: "#DFE2E3",
-  cyanBlueDarkShade: "#555F65",
-  grayBackgroundTextDark: "#5C5C5C",
-
-  orangeMain: "#ED7309",
-  orangeHover: "#FF8932",
-  orangePressed: "#C96C27",
-  orangeDisabled: "#FFCCA6",
-  lightMediumGoldenrod: "#EFEFB2",
-  lightCumulus: "#F8F7BF",
-
-  link: "#316DAA",
-  errorColor: "#C96C27",
-
-  warningColor: "#f1ca92",
-  red: "#c30",
-  darkRed: "#A60000",
-  activeSuccess: "#E3F7BE",
-  activeError: "#F7CDBE",
-  activeInfo: "#F8F7BF",
-  activeWarning: "#F7E6BE",
-
-  hoverSuccess: "#E3F7BE",
-  hoverError: "#F7CDBE",
-  hoverInfo: "#F8F7BF",
-  hoverWarning: "#F7E6BE",
+  mainGreen: "#2DB482",
+  secondGreen: "#22C386",
+  secondGreenDark: "#2E5E4C",
+  mainOrange: "#F97A0B",
+  secondOrange: "#FF9933",
+  mainRed: "#F2665A",
+  mainPurple: "#533ED1",
+  purple: "#6D4EC2",
+  secondPurple: "#8570BD",
+  secondPurpleDark: "#544C6A",
+  mainBlueLight: "#13B7EC",
+  secondBlue: "#11A3D4",
+  mainYellow: "#FFD30F",
 
   lightErrorStatus: "#F24724",
   darkErrorStatus: "#E06451",
-  outerSpace: "#474747",
-  silverChalice: "#ADADAD",
+
+  favoritesStatus: "#EDC409",
+  favoriteStatusDark: "#A38A1A",
+  lightStatusWarning: "#ED7309",
+  darkStatusWarning: "#E17415",
+  lightStatusPositive: "#35AD17",
+  darkStatusPositive: "#3BA420",
+
+  lightIcons: "#3B72A7",
+  darkIcon: "#E6E6E6",
+  link: "#316DAA",
+  darkLink: "#E06A1B",
+  blueLightMid: "#265A8F",
+  bigGrayDarkMid: "#B5B5B5",
+
+  lightToastDone: "#E3F7BE",
+  darkToastDone: "#9DE051",
+  lightToastInfo: "#F8F7BF",
+  darkToastInfo: "#E0D751",
+  lightToastAlert: "#F7E6BE",
+  darkToastAlert: "#E0B151",
+  lightToastWarning: "#F7CDBE",
+  darkToastWarning: "#E07751",
+
+  loader: "rgba(0, 0, 0, 0.05)",
+  dndColor: "rgba(229, 228, 138, 0.5)",
+  dndDarkColor: "rgba(229, 228, 138, 0.12)",
+  dndHoverColor: "rgba(204, 202, 102, 0.5)",
+  dndDarkHover: "rgba(204, 184, 102, 0.2)",
+
+  onWhiteColor: "rgba(0, 0, 0, 0.1)",
+  onBlackColor: "rgba(255, 255, 255, 0.1)",
+  boxShadowColor: "#040F1B14",
+  boxShadowDarkColor: "#040F1B29",
+  loaderLight: "#E7E7E7",
+  loaderDark: "#484848",
+
+  editorGreenColor: "#40865C",
+  editorBlueColor: "#446995",
+  editorOrangeColor: "#AA5252",
+  editorRedColor: "#AA5251",
+  windowsColor: "#4C83CD",
+  linuxColor: "#F4BB40",
+  androidColor: "#A8D548",
+  twitterColor: "#2AA3EF",
+  //
+
+  tickColor: "#20D21F",
+  redRomb: "#FF6F3D",
+  blueRomb: "#5DC0E8",
+  greenRomb: "#95C038",
+  tapHighlight: "rgba(0, 0, 0, 0)",
+  badgeShadow: "rgba(4, 15, 27, 0.16)",
+  popupShadow: "rgba(4, 15, 27, 0.08)",
+  menuShadow: "rgba(4, 15, 27, 0.04)",
+  lightScroll: "rgba(6, 22, 38, 0.16)",
+  lightScrollHover: "rgba(6, 22, 38, 0.32)",
+  lightScrollActive: "rgba(6, 22, 38, 0.5)",
+  darkScroll: "rgba(136, 136, 136, 0.4)",
+  darkScrollHover: "rgba(136, 136, 136, 0.64)",
+  darkScrollActive: "rgba(136, 136, 136, 0.8)",
+
+  //
+  silver: "rgba(200, 200, 200, 0.2)",
+  highlandGray: "rgba(11, 11, 11, 0.7)",
+  alphaGreenLight: "rgba(53, 173, 23, 0.1)",
+  alphaGreenDark: "rgba(59, 164, 32, 0.1)",
+  alphaRedLight: "rgba(242, 28, 14, 0.1)",
+  alphaRedDark: "rgba(224, 100, 81, 0.1)",
 };
diff --git a/packages/shared/utils/whiteLabelHelper.ts b/packages/shared/utils/whiteLabelHelper.ts
index dda1eaa5eb..5c927f3006 100644
--- a/packages/shared/utils/whiteLabelHelper.ts
+++ b/packages/shared/utils/whiteLabelHelper.ts
@@ -27,6 +27,7 @@
 /* eslint-disable no-console */
 import axios from "axios";
 import isEqual from "lodash/isEqual";
+import { globalColors } from "../themes";
 
 export type TWhiteLabel = {
   path: { light: string; dark: string };
@@ -40,7 +41,7 @@ export const generateLogo = (
   text: string,
   alignCenter: boolean,
   fontSize: number = 18,
-  fontColor: string = "#000",
+  fontColor: string = globalColors.darkBlack,
 ) => {
   const canvas = document.createElement("canvas");
   canvas.width = width;
@@ -179,7 +180,7 @@ export const getLogosAsText = (
       options.text,
       options.alignCenter || false,
       options.fontSize,
-      isDocsEditorName ? "#fff" : "#000",
+      isDocsEditorName ? globalColors.white : globalColors.darkBlack,
     );
     const logoDark = generateLogo(
       options.width,
@@ -187,7 +188,7 @@ export const getLogosAsText = (
       options.text,
       options.alignCenter || false,
       options.fontSize,
-      "#fff",
+      globalColors.white,
     );
     newLogos[i].path.light = logoLight;
     newLogos[i].path.dark = logoDark;
diff --git a/yarn.lock b/yarn.lock
index a244be5973..6aae9edcfd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27478,11 +27478,11 @@ __metadata:
 
 "typescript@patch:typescript@npm%3A^5#optional!builtin<compat/typescript>":
   version: 5.4.2
-  resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=5adc0c"
+  resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=d69c25"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10/f5f9a4133c2670761f0166eae5b3bafbc4a3fc24f0f42a93c9c893d9e9d6e66ea066969c5e7483fa66b4ae0e99125592553f3b92fd3599484de8be13b0615176
+  checksum: 10/ef4fc2994cc0219dc9ada94c92106ba8d44cbfd7a0328ed6f8d730311caf66e114cdfa07fbc6f369bfc0fc182d9493851b3bf1644c06fc5818690b19ee960d72
   languageName: node
   linkType: hard