Web:Login: add correct theme for Error502 and pass it to all components inside

packages/common/components/ErrorContainer/ErrorContainer.js

@@ -334,13 +334,22 @@ const ErrorContainer = (props) => {
         </svg>
       </div>
       {headerText && (
-        <Headline id="header" type="header">
+        <Headline id="header" type="header" theme={rest?.theme}>
           {headerText}
         </Headline>
       )}
-      {bodyText && <Text id="text">{bodyText}</Text>}
+      {bodyText && (
+        <Text id="text" theme={rest?.theme}>
+          {bodyText}
+        </Text>
+      )}
       {customizedBodyText && (
-        <Text id="customized-text" fontWeight={600} fontSize="13px">
+        <Text
+          id="customized-text"
+          fontWeight={600}
+          theme={rest?.theme}
+          fontSize="13px"
+        >
           {customizedBodyText}
         </Text>
       )}
@@ -348,6 +357,7 @@ const ErrorContainer = (props) => {
       {buttonText && buttonUrl && (
         <div id="button-container">
           <Button
+            theme={rest?.theme}
             id="button"
             size="normal"
             scale

packages/login/src/client/components/ErrorBoundary.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import ErrorContainer from "@docspace/common/components/ErrorContainer";
 import { useTranslation } from "react-i18next";
+import { Dark, Base } from "@docspace/components/themes";
 
 interface IError520Props {
   match?: {
     params: MatchType;
   };
+  theme?: any;
 }
 
 interface IErrorBoundaryProps extends IError520Props {
   onError?: (error: any, errorInfo: any) => void;
+  theme?: any;
   children?: React.ReactNode;
 }
 
@@ -21,8 +24,19 @@ const Error520: React.FC<IError520Props> = ({ match }) => {
   const { t } = useTranslation(["Common"]);
   const { error } = (match && match.params) || {};
 
+  const theme =
+    typeof window !== "undefined" &&
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? Dark
+      : Base;
+
   return (
-    <ErrorContainer headerText={t("SomethingWentWrong")} bodyText={error} />
+    <ErrorContainer
+      headerText={t("SomethingWentWrong")}
+      bodyText={error}
+      theme={theme}
+    />
   );
 };