diff --git a/packages/common/components/Article/sub-components/article-hide-menu-button.js b/packages/common/components/Article/sub-components/article-hide-menu-button.js
index 4e14750f32..391514540d 100644
--- a/packages/common/components/Article/sub-components/article-hide-menu-button.js
+++ b/packages/common/components/Article/sub-components/article-hide-menu-button.js
@@ -42,7 +42,7 @@ const StyledHideArticleMenuButton = styled.div`
 
     .article-hide-menu-text {
       margin-left: 8px;
-      color: ${({ currentColorScheme }) => currentColorScheme.accentColor};
+      color: ${({ currentColorScheme }) => currentColorScheme.main.accent};
     }
 
     @media ${tablet} {
@@ -75,7 +75,7 @@ const StyledHideArticleMenuButton = styled.div`
 
     svg {
       path {
-        fill: ${({ currentColorScheme }) => currentColorScheme.accentColor};
+        fill: ${({ currentColorScheme }) => currentColorScheme.main.accent};
       }
     }
   }
diff --git a/packages/common/components/ColorTheme/styled/badge.js b/packages/common/components/ColorTheme/styled/badge.js
index 93de5f6358..08e6928500 100644
--- a/packages/common/components/ColorTheme/styled/badge.js
+++ b/packages/common/components/ColorTheme/styled/badge.js
@@ -24,7 +24,7 @@ const getDefaultStyles = ({
         ? "#444444"
         : isPaidBadge || $currentColorScheme.id < 7
         ? theme.badge.color
-        : $currentColorScheme.textColor} !important;
+        : $currentColorScheme.text.accent} !important;
     }
 
     ${StyledInner} {
@@ -32,14 +32,14 @@ const getDefaultStyles = ({
         ? backgroundColor
         : $currentColorScheme.id === 7 && !theme.isBase
         ? "#ECEEF1"
-        : $currentColorScheme.accentColor};
+        : $currentColorScheme.main.accent};
 
       &:hover {
         background-color: ${backgroundColor
           ? backgroundColor
           : $currentColorScheme.id === 7 && !theme.isBase
           ? "#ECEEF1"
-          : $currentColorScheme.accentColor};
+          : $currentColorScheme.main.accent};
       }
     }
 
@@ -48,7 +48,7 @@ const getDefaultStyles = ({
         ? backgroundColor
         : $currentColorScheme.id === 7 && !theme.isBase
         ? "#ECEEF1"
-        : $currentColorScheme.accentColor};
+        : $currentColorScheme.main.accent};
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/calendar.js b/packages/common/components/ColorTheme/styled/calendar.js
index 5219ec49a4..9607b1b7bf 100644
--- a/packages/common/components/ColorTheme/styled/calendar.js
+++ b/packages/common/components/ColorTheme/styled/calendar.js
@@ -5,10 +5,10 @@ const getDefaultStyles = ({ $currentColorScheme, color }) =>
   $currentColorScheme &&
   css`
     .calendar-month_selected-day {
-      background-color: ${color ? color : $currentColorScheme.accentColor};
+      background-color: ${color ? color : $currentColorScheme.main.accent};
       color: ${$currentColorScheme.id > 7 && $currentColorScheme.textColor};
       &:hover {
-        background-color: ${color ? color : $currentColorScheme.accentColor};
+        background-color: ${color ? color : $currentColorScheme.main.accent};
         color: ${$currentColorScheme.id > 7 && $currentColorScheme.textColor};
       }
     }
diff --git a/packages/common/components/ColorTheme/styled/catalogItem.js b/packages/common/components/ColorTheme/styled/catalogItem.js
index 7843beb29d..4e08ffed6a 100644
--- a/packages/common/components/ColorTheme/styled/catalogItem.js
+++ b/packages/common/components/ColorTheme/styled/catalogItem.js
@@ -12,10 +12,10 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
   $currentColorScheme &&
   css`
     ${StyledCatalogItemText} {
-      color: ${isActive && theme.isBase && $currentColorScheme.accentColor};
+      color: ${isActive && theme.isBase && $currentColorScheme.main.accent};
 
       &:hover {
-        color: ${isActive && theme.isBase && $currentColorScheme.accentColor};
+        color: ${isActive && theme.isBase && $currentColorScheme.main.accent};
       }
     }
 
@@ -24,12 +24,12 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
         path {
           fill: ${isActive &&
           theme.isBase &&
-          $currentColorScheme.accentColor} !important;
+          $currentColorScheme.main.accent} !important;
         }
         circle {
           fill: ${isActive &&
           theme.isBase &&
-          $currentColorScheme.accentColor} !important;
+          $currentColorScheme.main.accent} !important;
         }
       }
 
@@ -38,7 +38,7 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
           path {
             fill: ${isActive &&
             theme.isBase &&
-            $currentColorScheme.accentColor} !important;
+            $currentColorScheme.main.accent} !important;
           }
         }
       }
diff --git a/packages/common/components/ColorTheme/styled/comboButton.js b/packages/common/components/ColorTheme/styled/comboButton.js
index 4424c8d854..0c07342bd5 100644
--- a/packages/common/components/ColorTheme/styled/comboButton.js
+++ b/packages/common/components/ColorTheme/styled/comboButton.js
@@ -7,13 +7,13 @@ const getDefaultStyles = ({ $currentColorScheme, isOpen, theme }) =>
   css`
     border-color: ${isOpen &&
     (theme.isBase
-      ? $currentColorScheme.accentColor
+      ? $currentColorScheme.main.accent
       : theme.comboBox.button.openBorderColor)};
 
     :focus {
       border-color: ${isOpen &&
       (theme.isBase
-        ? $currentColorScheme.accentColor
+        ? $currentColorScheme.main.accent
         : theme.comboBox.button.hoverBorderColor)};
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/filterBlockItemTag.js b/packages/common/components/ColorTheme/styled/filterBlockItemTag.js
index 4928160226..67c62b2280 100644
--- a/packages/common/components/ColorTheme/styled/filterBlockItemTag.js
+++ b/packages/common/components/ColorTheme/styled/filterBlockItemTag.js
@@ -6,15 +6,15 @@ const getDefaultStyles = ({ $currentColorScheme, isSelected, theme }) =>
   $currentColorScheme &&
   isSelected &&
   css`
-    background: ${$currentColorScheme.accentColor};
-    border-color: ${$currentColorScheme.accentColor};
+    background: ${$currentColorScheme.main.accent};
+    border-color: ${$currentColorScheme.main.accent};
 
     p {
       color: ${$currentColorScheme.id > 7 && $currentColorScheme.textColor};
     }
     &:hover {
-      background: ${$currentColorScheme.accentColor};
-      border-color: ${$currentColorScheme.accentColor};
+      background: ${$currentColorScheme.main.accent};
+      border-color: ${$currentColorScheme.main.accent};
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/floatingButton.js b/packages/common/components/ColorTheme/styled/floatingButton.js
index 2ff657e82d..ab5eede901 100644
--- a/packages/common/components/ColorTheme/styled/floatingButton.js
+++ b/packages/common/components/ColorTheme/styled/floatingButton.js
@@ -16,10 +16,10 @@ const getDefaultStyles = ({
 }) =>
   $currentColorScheme &&
   css`
-    background: ${color ? color : $currentColorScheme.accentColor} !important;
+    background: ${color ? color : $currentColorScheme.main.accent} !important;
 
     ${StyledFloatingButton} {
-      background: ${color ? color : $currentColorScheme.accentColor} !important;
+      background: ${color ? color : $currentColorScheme.main.accent} !important;
     }
 
     ${IconBox} {
diff --git a/packages/common/components/ColorTheme/styled/iconButton.js b/packages/common/components/ColorTheme/styled/iconButton.js
index d277b55d6e..f40c5dc845 100644
--- a/packages/common/components/ColorTheme/styled/iconButton.js
+++ b/packages/common/components/ColorTheme/styled/iconButton.js
@@ -18,14 +18,14 @@ const getDefaultStyles = ({
       path {
         fill: ${(shared || locked || isFavorite || isEditing) &&
         theme.isBase &&
-        $currentColorScheme.accentColor};
+        $currentColorScheme.main.accent};
       }
     }
 
     &:hover {
       svg {
         path {
-          fill: ${theme.isBase && $currentColorScheme.accentColor};
+          fill: ${theme.isBase && $currentColorScheme.main.accent};
         }
       }
     }
diff --git a/packages/common/components/ColorTheme/styled/iconButtonPin.js b/packages/common/components/ColorTheme/styled/iconButtonPin.js
index 6f261b7201..9b2cca14af 100644
--- a/packages/common/components/ColorTheme/styled/iconButtonPin.js
+++ b/packages/common/components/ColorTheme/styled/iconButtonPin.js
@@ -9,14 +9,14 @@ const getDefaultStyles = ({ $currentColorScheme, theme }) =>
     ${commonIconsStyles}
     svg {
       path {
-        fill: ${theme.isBase && $currentColorScheme.accentColor};
+        fill: ${theme.isBase && $currentColorScheme.main.accent};
       }
     }
 
     &:hover {
       svg {
         path {
-          fill: ${theme.isBase && $currentColorScheme.accentColor};
+          fill: ${theme.isBase && $currentColorScheme.main.accent};
         }
       }
     }
diff --git a/packages/common/components/ColorTheme/styled/iconWrapper.js b/packages/common/components/ColorTheme/styled/iconWrapper.js
index 8072d1af87..ceada0400d 100644
--- a/packages/common/components/ColorTheme/styled/iconWrapper.js
+++ b/packages/common/components/ColorTheme/styled/iconWrapper.js
@@ -6,7 +6,7 @@ const getDefaultStyles = ({ $currentColorScheme }) =>
   css`
   svg {
     path:nth-child(2) {
-        fill: ${$currentColorScheme.accentColor};
+        fill: ${$currentColorScheme.main.accent};
     }
 `;
 
diff --git a/packages/common/components/ColorTheme/styled/indicatorFilterButton.js b/packages/common/components/ColorTheme/styled/indicatorFilterButton.js
index 15cd14a141..8d0d1adc70 100644
--- a/packages/common/components/ColorTheme/styled/indicatorFilterButton.js
+++ b/packages/common/components/ColorTheme/styled/indicatorFilterButton.js
@@ -4,10 +4,10 @@ import StyledIndicator from "@docspace/common/components/FilterInput/sub-compone
 const getDefaultStyles = ({ $currentColorScheme }) =>
   $currentColorScheme &&
   css`
-    background: ${$currentColorScheme.accentColor};
+    background: ${$currentColorScheme.main.accent};
 
     &:hover {
-      background: ${$currentColorScheme.accentColor};
+      background: ${$currentColorScheme.main.accent};
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/indicatorLoader.js b/packages/common/components/ColorTheme/styled/indicatorLoader.js
index c5eb1c87e4..af6a2c371f 100644
--- a/packages/common/components/ColorTheme/styled/indicatorLoader.js
+++ b/packages/common/components/ColorTheme/styled/indicatorLoader.js
@@ -5,10 +5,10 @@ const getDefaultStyles = ({ $currentColorScheme }) =>
   $currentColorScheme &&
   css`
     #ipl-progress-indicator {
-      background-color: ${$currentColorScheme.accentColor};
+      background-color: ${$currentColorScheme.main.accent};
 
       &:hover {
-        background-color: ${$currentColorScheme.accentColor};
+        background-color: ${$currentColorScheme.main.accent};
       }
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/infoPanelToggle.js b/packages/common/components/ColorTheme/styled/infoPanelToggle.js
index 74acb70e1d..8622e7396c 100644
--- a/packages/common/components/ColorTheme/styled/infoPanelToggle.js
+++ b/packages/common/components/ColorTheme/styled/infoPanelToggle.js
@@ -8,7 +8,7 @@ const getDefaultStyles = ({ $currentColorScheme, theme }) =>
     .info-panel-toggle-bg {
       path {
         fill: ${theme.isBase
-          ? $currentColorScheme.accentColor
+          ? $currentColorScheme.main.accent
           : theme.infoPanel.sectionHeaderToggleIconActive};
       }
     }
diff --git a/packages/common/components/ColorTheme/styled/inputBlock.js b/packages/common/components/ColorTheme/styled/inputBlock.js
index 5ca8fe1ea8..9a5838a77c 100644
--- a/packages/common/components/ColorTheme/styled/inputBlock.js
+++ b/packages/common/components/ColorTheme/styled/inputBlock.js
@@ -9,7 +9,7 @@ const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) =>
     :focus-within {
       border-color: ${(hasError && theme.input.focusErrorBorderColor) ||
       (theme.isBase
-        ? $currentColorScheme.accentColor
+        ? $currentColorScheme.main.accent
         : theme.inputBlock.borderColor)};
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/link.js b/packages/common/components/ColorTheme/styled/link.js
index 8c3a8beca2..31323241b5 100644
--- a/packages/common/components/ColorTheme/styled/link.js
+++ b/packages/common/components/ColorTheme/styled/link.js
@@ -4,10 +4,10 @@ import StyledText from "@docspace/components/link/styled-link";
 const getDefaultStyles = ({ $currentColorScheme, noHover }) =>
   $currentColorScheme &&
   css`
-    color: ${$currentColorScheme.accentColor};
+    color: ${$currentColorScheme.main.accent};
 
     &:hover {
-      color: ${!noHover && $currentColorScheme.accentColor};
+      color: ${!noHover && $currentColorScheme.main.accent};
       text-decoration: underline;
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/linkForgotPassword.js b/packages/common/components/ColorTheme/styled/linkForgotPassword.js
index 7796cb7cae..ca691d28f7 100644
--- a/packages/common/components/ColorTheme/styled/linkForgotPassword.js
+++ b/packages/common/components/ColorTheme/styled/linkForgotPassword.js
@@ -5,7 +5,7 @@ const getDefaultStyles = ({ $currentColorScheme }) =>
   $currentColorScheme &&
   css`
     .login-link {
-      color: ${$currentColorScheme.accentColor};
+      color: ${$currentColorScheme.main.accent};
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/loadingButton.js b/packages/common/components/ColorTheme/styled/loadingButton.js
index 4a296fb3a6..04557bf0a4 100644
--- a/packages/common/components/ColorTheme/styled/loadingButton.js
+++ b/packages/common/components/ColorTheme/styled/loadingButton.js
@@ -12,14 +12,14 @@ const getDefaultStyles = ({ $currentColorScheme, theme }) =>
     ${StyledCircle} {
       .circle__mask .circle__fill {
         background-color: ${theme.isBase
-          ? $currentColorScheme.accentColor
+          ? $currentColorScheme.main.accent
           : theme.filesPanels.upload.loadingButton.color};
       }
     }
 
     ${StyledLoadingButton} {
       color: ${theme.isBase
-        ? $currentColorScheme.accentColor
+        ? $currentColorScheme.main.accent
         : theme.filesPanels.upload.loadingButton.color};
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/mainButton.js b/packages/common/components/ColorTheme/styled/mainButton.js
index 1e2dc9b508..25653fe497 100644
--- a/packages/common/components/ColorTheme/styled/mainButton.js
+++ b/packages/common/components/ColorTheme/styled/mainButton.js
@@ -20,16 +20,16 @@ const disableStyles = css`
 const getDefaultStyles = ({ $currentColorScheme, isDisabled, theme }) =>
   $currentColorScheme &&
   css`
-    background-color: ${$currentColorScheme.accentColor};
+    background-color: ${$currentColorScheme.main.accent};
 
     &:hover {
-      background-color: ${$currentColorScheme.accentColor};
+      background-color: ${$currentColorScheme.main.accent};
       opacity: 0.85;
       cursor: pointer;
     }
 
     &:active {
-      background-color: ${$currentColorScheme.accentColor};
+      background-color: ${$currentColorScheme.main.accent};
       opacity: 1;
       filter: ${theme.isBase ? "brightness(90%)" : "brightness(82%)"};
       cursor: pointer;
diff --git a/packages/common/components/ColorTheme/styled/slider.js b/packages/common/components/ColorTheme/styled/slider.js
index d85877960a..ca1481f5b0 100644
--- a/packages/common/components/ColorTheme/styled/slider.js
+++ b/packages/common/components/ColorTheme/styled/slider.js
@@ -11,11 +11,11 @@ const getDefaultStyles = ({
   css`
     background-image: ${withPouring &&
     ((theme.isBase &&
-      `linear-gradient( ${$currentColorScheme.accentColor}, ${$currentColorScheme.accentColor})`) ||
+      `linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) ||
       (!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
 
     &::-webkit-slider-thumb {
-      background: ${(theme.isBase && $currentColorScheme.accentColor) ||
+      background: ${(theme.isBase && $currentColorScheme.main.accent) ||
       (!theme.isBase && "#FFFFFF")};
       box-shadow: ${!theme.isBase &&
       "0px 3px 12px rgba(0, 0, 0, 0.25); !important"};
@@ -24,7 +24,7 @@ const getDefaultStyles = ({
     &:hover {
       background-image: ${withPouring &&
       ((theme.isBase &&
-        `linear-gradient( ${$currentColorScheme.accentColor}, ${$currentColorScheme.accentColor})`) ||
+        `linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) ||
         (!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
     }
 
diff --git a/packages/common/components/ColorTheme/styled/submenuItemLabel.js b/packages/common/components/ColorTheme/styled/submenuItemLabel.js
index d30edb2a61..bddcafd477 100644
--- a/packages/common/components/ColorTheme/styled/submenuItemLabel.js
+++ b/packages/common/components/ColorTheme/styled/submenuItemLabel.js
@@ -5,10 +5,10 @@ import { StyledSubmenuItemLabel } from "@docspace/components/submenu/styled-subm
 const getDefaultStyles = ({ $currentColorScheme, isActive }) =>
   $currentColorScheme &&
   css`
-    background-color: ${isActive ? $currentColorScheme.accentColor : "none"};
+    background-color: ${isActive ? $currentColorScheme.main.accent : "none"};
 
     &:hover {
-      background-color: ${isActive && $currentColorScheme.accentColor};
+      background-color: ${isActive && $currentColorScheme.main.accent};
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/submenuText.js b/packages/common/components/ColorTheme/styled/submenuText.js
index a81019b2dc..68bc56830d 100644
--- a/packages/common/components/ColorTheme/styled/submenuText.js
+++ b/packages/common/components/ColorTheme/styled/submenuText.js
@@ -7,12 +7,12 @@ const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
   css`
     color: ${isActive &&
     theme.isBase &&
-    $currentColorScheme.accentColor} !important;
+    $currentColorScheme.main.accent} !important;
 
     &:hover {
       color: ${isActive &&
       theme.isBase &&
-      $currentColorScheme.accentColor} !important;
+      $currentColorScheme.main.accent} !important;
     }
   `;
 
diff --git a/packages/common/components/ColorTheme/styled/tabsContainer.js b/packages/common/components/ColorTheme/styled/tabsContainer.js
index 76508a0637..2af4078ad1 100644
--- a/packages/common/components/ColorTheme/styled/tabsContainer.js
+++ b/packages/common/components/ColorTheme/styled/tabsContainer.js
@@ -7,7 +7,7 @@ const getDefaultStyles = ({ $currentColorScheme, selected, theme }) =>
   css`
     background-color: ${selected &&
     theme.isBase &&
-    $currentColorScheme.accentColor} !important;
+    $currentColorScheme.main.accent} !important;
 
     .title_style {
       color: ${$currentColorScheme.id > 7 &&
diff --git a/packages/common/components/ColorTheme/styled/textInput.js b/packages/common/components/ColorTheme/styled/textInput.js
index 9c5c9f5294..7f6b6f848f 100644
--- a/packages/common/components/ColorTheme/styled/textInput.js
+++ b/packages/common/components/ColorTheme/styled/textInput.js
@@ -16,7 +16,7 @@ const getDefaultStyles = ({
       (hasWarning && theme.input.focusWarningBorderColor) ||
       (isDisabled && theme.input.focusDisabledBorderColor) ||
       (theme.isBase
-        ? $currentColorScheme.accentColor
+        ? $currentColorScheme.main.accent
         : theme.input.focusBorderColor)};
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/textarea.js b/packages/common/components/ColorTheme/styled/textarea.js
index 8d987a9dd8..50c2fdfbea 100644
--- a/packages/common/components/ColorTheme/styled/textarea.js
+++ b/packages/common/components/ColorTheme/styled/textarea.js
@@ -9,7 +9,7 @@ const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) =>
       border-color: ${hasError
         ? theme.textArea.focusErrorBorderColor
         : theme.isBase
-        ? $currentColorScheme.accentColor
+        ? $currentColorScheme.main.accent
         : theme.textArea.focusBorderColor};
     }
   `;
diff --git a/packages/common/components/ColorTheme/styled/toggleButton.js b/packages/common/components/ColorTheme/styled/toggleButton.js
index b66d83b4db..5c99b9063b 100644
--- a/packages/common/components/ColorTheme/styled/toggleButton.js
+++ b/packages/common/components/ColorTheme/styled/toggleButton.js
@@ -15,7 +15,7 @@ const getDefaultStyles = ({
     ${ToggleButtonContainer} {
       svg {
         rect {
-          fill: ${isChecked && $currentColorScheme.accentColor};
+          fill: ${isChecked && $currentColorScheme.main.accent};
         }
 
         circle {
diff --git a/packages/common/components/ColorTheme/styled/versionBadge.js b/packages/common/components/ColorTheme/styled/versionBadge.js
index d3fc8f566c..6973b57117 100644
--- a/packages/common/components/ColorTheme/styled/versionBadge.js
+++ b/packages/common/components/ColorTheme/styled/versionBadge.js
@@ -10,13 +10,13 @@ const getDefaultStyles = ({ $currentColorScheme, $isVersion, theme, index }) =>
           ? theme.filesVersionHistory.badge.defaultFill
           : index === 0
           ? theme.filesVersionHistory.badge.fill
-          : $currentColorScheme.accentColor};
+          : $currentColorScheme.main.accent};
 
         stroke: ${!$isVersion
           ? theme.filesVersionHistory.badge.stroke
           : index === 0
           ? theme.filesVersionHistory.badge.fill
-          : $currentColorScheme.accentColor};
+          : $currentColorScheme.main.accent};
       }
     }