Web: Editor: Fixed theme.

packages/editor/src/client/App.js

@@ -20,17 +20,14 @@ import ThemeProvider from "@docspace/components/theme-provider";
 
 const isDesktopEditor = window["AscDesktopEditor"] !== undefined;
 
-const ThemeProviderWrapper = inject(({ auth }) => {
-  const { settingsStore } = auth;
-  return { theme: settingsStore.theme };
-})(observer(ThemeProvider));
-
-const App = ({ initialLanguage, initialI18nStoreASC, ...rest }) => {
+const App = ({ initialLanguage, initialI18nStoreASC, setTheme, ...rest }) => {
   const [isInitialized, isErrorLoading] = useMfScripts();
   useSSR(initialI18nStoreASC, initialLanguage);
 
   useEffect(() => {
     const tempElm = document.getElementById("loader");
+    const userTheme = rest.user?.theme;
+    if (userTheme) setTheme(userTheme);
 
     const isLoadingDocumentError = rest.error !== null;
     const isLoadedDocument = !rest.error && rest?.config?.editorUrl;
@@ -59,22 +56,37 @@ const App = ({ initialLanguage, initialI18nStoreASC, ...rest }) => {
 
   return (
     <ErrorBoundary onError={onError}>
-      <MobxProvider {...store}>
-        <I18nextProvider i18n={i18n}>
-          <ThemeProviderWrapper>
-            <GlobalStyle fonts={fonts} />
-            <Editor
-              mfReady={isInitialized}
-              mfFailed={isErrorLoading}
-              isDesktopEditor={isDesktopEditor}
-              initDesktop={initDesktop}
-              {...rest}
-            />
-          </ThemeProviderWrapper>
-        </I18nextProvider>
-      </MobxProvider>
+      <GlobalStyle fonts={fonts} />
+      <Editor
+        mfReady={isInitialized}
+        mfFailed={isErrorLoading}
+        isDesktopEditor={isDesktopEditor}
+        initDesktop={initDesktop}
+        {...rest}
+      />
     </ErrorBoundary>
   );
 };
 
-export default App;
+const AppWrapper = inject(({ auth }) => {
+  const { settingsStore } = auth;
+  const { setTheme } = settingsStore;
+  return {
+    setTheme,
+  };
+})(observer(App));
+
+const ThemeProviderWrapper = inject(({ auth }) => {
+  const { settingsStore } = auth;
+  return { theme: settingsStore.theme };
+})(observer(ThemeProvider));
+
+export default (props) => (
+  <MobxProvider {...store}>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProviderWrapper>
+        <AppWrapper {...props} />
+      </ThemeProviderWrapper>
+    </I18nextProvider>
+  </MobxProvider>
+);

packages/editor/src/client/components/Editor.js

@@ -50,7 +50,7 @@ const onSDKError = (event) => {
 const ErrorContainerBody = styled(ErrorContainer)`
   position: absolute;
   height: 100%;
-  background: white;
+
 `;
 
 let documentIsReady = false;

packages/editor/src/server/lib/helpers/index.js

@@ -47,7 +47,13 @@ export const initDocEditor = async (req) => {
   let personal = IS_PERSONAL || null;
   const { headers, url, query, type } = req;
   const { version, desktop: isDesktop } = query;
-  let error = null;
+  let error = null,
+    user,
+    settings,
+    filesSettings,
+    versionInfo,
+    appearanceTheme,
+    logoUrls;
   initSSR(headers);
 
   try {
@@ -67,7 +73,7 @@ export const initDocEditor = async (req) => {
     const view = url.indexOf("action=view") !== -1;
     const fileVersion = version || null;
 
-    const [
+    [
       user,
       settings,
       filesSettings,
@@ -138,7 +144,7 @@ export const initDocEditor = async (req) => {
     error = {
       errorMessage: message,
     };
-    return { error };
+    return { error, user };
   }
 };