fix: custom theme mutation logic

makeplane · Sep 24, 2024 · a651a60 · a651a60
1 parent f38755b
commit a651a60
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 43 deletions.
diff --git a/web/app/profile/appearance/page.tsx b/web/app/profile/appearance/page.tsx
@@ -52,13 +52,8 @@ const ProfileAppearancePage = observer(() => {
   const applyThemeChange = (theme: Partial<IUserTheme>) => {
     setTheme(theme?.theme || "system");
 
-    const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
-    if (theme?.theme === "custom" && theme?.palette && customThemeElement) {
-      applyTheme(
-        theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-        false,
-        customThemeElement
-      );
+    if (theme?.theme === "custom" && theme?.palette) {
+      applyTheme(theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5", false);
     } else unsetCustomCssVariables();
   };
 

diff --git a/web/core/lib/wrappers/store-wrapper.tsx b/web/core/lib/wrappers/store-wrapper.tsx
@@ -21,8 +21,6 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   const { setQuery } = useRouterParams();
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { data: userProfile } = useUserProfile();
-  // states
-  const [dom, setDom] = useState<HTMLElement | null>(null);
 
   /**
    * Sidebar collapsed fetching from local storage
@@ -44,36 +42,14 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
     const currentThemePalette = userProfile?.theme?.palette;
     if (currentTheme) {
       setTheme(currentTheme);
-      if (currentTheme === "custom" && currentThemePalette && dom) {
+      if (currentTheme === "custom" && currentThemePalette) {
         applyTheme(
           currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          false,
-          dom
+          false
         );
       } else unsetCustomCssVariables();
     }
-  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]);
-
-  useEffect(() => {
-    if (dom) return;
-
-    const observer = new MutationObserver((mutationsList, observer) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
-          if (customThemeElement) {
-            setDom(customThemeElement);
-            observer.disconnect();
-            break;
-          }
-        }
-      }
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-
-    return () => observer.disconnect();
-  }, [dom]);
+  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme]);
 
   useEffect(() => {
     if (!params) return;

diff --git a/web/helpers/theme.helper.ts b/web/helpers/theme.helper.ts
@@ -59,8 +59,9 @@ const calculateShades = (hexValue: string): TShades => {
   return shades as TShades;
 };
 
-export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLElement | null) => {
+export const applyTheme = (palette: string, isDarkPalette: boolean) => {
   if (!palette) return;
+  const themeElement = window.document?.querySelector<HTMLElement>("[data-theme]");
   // palette: [bg, text, primary, sidebarBg, sidebarText]
   const values: string[] = palette.split(",");
   values.push(isDarkPalette ? "dark" : "light");
@@ -80,27 +81,27 @@ export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLEle
     const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
     const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
 
-    dom?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
-    dom?.style.setProperty(`--color-text-${shade}`, textRgbValues);
-    dom?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
-    dom?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
-    dom?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
+    themeElement?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
+    themeElement?.style.setProperty(`--color-text-${shade}`, textRgbValues);
+    themeElement?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
+    themeElement?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
+    themeElement?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
 
     if (i >= 100 && i <= 400) {
       const borderShade = i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
 
-      dom?.style.setProperty(
+      themeElement?.style.setProperty(
         `--color-border-${shade}`,
         `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
       );
-      dom?.style.setProperty(
+      themeElement?.style.setProperty(
         `--color-sidebar-border-${shade}`,
         `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
       );
     }
   }
 
-  dom?.style.setProperty("--color-scheme", values[5]);
+  themeElement?.style.setProperty("--color-scheme", values[5]);
 };
 
 export const unsetCustomCssVariables = () => {