Login:Src: change useTheme and ThemeProvider

packages/login/src/app/layout.tsx

@@ -34,7 +34,12 @@ import { LANGUAGE, SYSTEM_THEME_KEY } from "@docspace/shared/constants";
 
 import StyledComponentsRegistry from "@/utils/registry";
 import { Providers } from "@/providers";
-import { getColorTheme, getConfig, getSettings } from "@/utils/actions";
+import {
+  getColorTheme,
+  getConfig,
+  getSettings,
+  getUser,
+} from "@/utils/actions";
 
 import "../styles/globals.scss";
 
@@ -57,9 +62,10 @@ export default async function RootLayout({
 
   let redirectUrl = "";
 
-  const [settings, colorTheme] = await Promise.all([
+  const [settings, colorTheme, user] = await Promise.all([
     getSettings(),
     getColorTheme(),
+    getUser(),
   ]);
 
   if (settings === "access-restricted") redirectUrl = `/${settings}`;
@@ -123,6 +129,7 @@ export default async function RootLayout({
               systemTheme: systemTheme?.value as ThemeKeys,
             }}
             redirectURL={redirectUrl}
+            user={user}
           >
             <Toast isSSR />
             {children}

packages/login/src/hooks/useTheme.ts

@@ -26,6 +26,7 @@ import { i18n } from "i18next";
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import { match, P } from "ts-pattern";
 
 import { Base, Dark, TColorScheme, TTheme } from "@docspace/shared/themes";
 import { getEditorTheme, getSystemTheme } from "@docspace/shared/utils";
@@ -34,14 +35,18 @@ import { getAppearanceTheme } from "@docspace/shared/api/settings";
 import { TGetColorTheme } from "@docspace/shared/api/settings/types";
 import { setCookie } from "@docspace/shared/utils/cookie";
 import { SYSTEM_THEME_KEY } from "@docspace/shared/constants";
+import { TUser } from "@docspace/shared/api/people/types";
+
+type MatchType = [ThemeKeys | undefined, ThemeKeys | undefined];
 
 export interface UseThemeProps {
+  user?: TUser;
   colorTheme?: TGetColorTheme;
   systemTheme?: ThemeKeys;
   i18n: i18n;
 }
 
-const useTheme = ({ colorTheme, systemTheme, i18n }: UseThemeProps) => {
+const useTheme = ({ user, colorTheme, systemTheme, i18n }: UseThemeProps) => {
   const [currentColorTheme, setCurrentColorTheme] =
     React.useState<TColorScheme>(() => {
       if (!colorTheme) return {} as TColorScheme;
@@ -58,11 +63,18 @@ const useTheme = ({ colorTheme, systemTheme, i18n }: UseThemeProps) => {
         ({} as TColorScheme)
       : ({} as TColorScheme);
 
-    if (systemTheme === ThemeKeys.DarkStr) {
-      return { ...Dark, currentColorScheme: currColorTheme };
-    }
+    const newTheme = match<MatchType>([user?.theme, systemTheme])
+      .returnType<TTheme>()
+      .with([ThemeKeys.DarkStr, P._], () => Dark)
+      .with([ThemeKeys.BaseStr, P._], () => Base)
+      .with([ThemeKeys.SystemStr, ThemeKeys.BaseStr], () => Base)
+      .with([ThemeKeys.SystemStr, ThemeKeys.DarkStr], () => Dark)
+      .with([undefined, ThemeKeys.DarkStr], () => Dark)
+      .with([undefined, ThemeKeys.BaseStr], () => Base)
+      .otherwise(() => Base);
+
     return {
-      ...Base,
+      ...newTheme,
       currentColorScheme: currColorTheme,
     };
   });
@@ -85,40 +97,28 @@ const useTheme = ({ colorTheme, systemTheme, i18n }: UseThemeProps) => {
   const getUserTheme = React.useCallback(() => {
     const SYSTEM_THEME = getSystemTheme();
 
+    let theme = user?.theme ?? SYSTEM_THEME;
     const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
 
-    if (SYSTEM_THEME === ThemeKeys.BaseStr) {
-      setTheme({
-        ...Base,
-        currentColorScheme: currentColorTheme,
-        interfaceDirection,
-      });
+    if (user?.theme === ThemeKeys.SystemStr) theme = SYSTEM_THEME;
 
-      if (window?.AscDesktopEditor !== undefined) {
-        const editorTheme = getEditorTheme(ThemeKeys.Base);
-
-        window.AscDesktopEditor.execCommand("portal:uitheme", editorTheme);
-      }
-
-      setCookie(SYSTEM_THEME_KEY, ThemeKeys.BaseStr);
-
-      return;
-    }
+    const isBaseTheme = theme === ThemeKeys.BaseStr;
 
     setTheme({
-      ...Dark,
+      ...(isBaseTheme ? Base : Dark),
       currentColorScheme: currentColorTheme,
       interfaceDirection,
     });
-
-    setCookie(SYSTEM_THEME_KEY, ThemeKeys.DarkStr);
+    setCookie(SYSTEM_THEME_KEY, SYSTEM_THEME);
 
     if (window?.AscDesktopEditor !== undefined) {
-      const editorTheme = getEditorTheme(ThemeKeys.Dark);
+      const editorTheme = getEditorTheme(
+        isBaseTheme ? ThemeKeys.Base : ThemeKeys.Dark,
+      );
 
       window.AscDesktopEditor.execCommand("portal:uitheme", editorTheme);
     }
-  }, [currentColorTheme, i18n]);
+  }, [user?.theme, currentColorTheme, i18n]);
 
   React.useEffect(() => {
     getCurrentColorTheme();

packages/login/src/providers/index.tsx

@@ -47,10 +47,12 @@ export const Providers = ({
   children,
   value,
   redirectURL,
+  user,
 }: {
   children: React.ReactNode;
   value: TDataContext;
   redirectURL: string;
+  user?: TUser;
 }) => {
   const firebaseHelper = new FirebaseHelper(
     value.settings?.firebase ?? ({} as TFirebaseSettings),
@@ -75,6 +77,7 @@ export const Providers = ({
   });
 
   const { theme, currentColorTheme } = useTheme({
+    user,
     colorTheme: value.colorTheme,
     systemTheme: value.systemTheme,
     i18n,