diff --git a/packages/common/components/ColorTheme/styled/toggleButton.js b/packages/common/components/ColorTheme/styled/toggleButton.js
index a52c32524f..02de7f7d36 100644
--- a/packages/common/components/ColorTheme/styled/toggleButton.js
+++ b/packages/common/components/ColorTheme/styled/toggleButton.js
@@ -4,20 +4,22 @@ import {
   ToggleButtonContainer,
 } from "@docspace/components/toggle-button/styled-toggle-button";
 
-const getDefaultStyles = ({ currentColorScheme, isDisabled, isChecked }) => css`
-  ${ToggleButtonContainer} {
-    svg {
-      rect {
-        fill: ${isChecked && currentColorScheme.accentColor};
-        opacity: ${isDisabled && "0.6"};
-
-        &:hover {
+const getDefaultStyles = ({ currentColorScheme, isDisabled, isChecked }) =>
+  currentColorScheme &&
+  css`
+    ${ToggleButtonContainer} {
+      svg {
+        rect {
           fill: ${isChecked && currentColorScheme.accentColor};
           opacity: ${isDisabled && "0.6"};
+
+          &:hover {
+            fill: ${isChecked && currentColorScheme.accentColor};
+            opacity: ${isDisabled && "0.6"};
+          }
         }
       }
     }
-  }
-`;
+  `;
 
 export default styled(Container)(getDefaultStyles);