Lightmode/Darkmode merge including many fixes since 2.0.2

2025-05-19 00:04:37 +02:00
parent 7bc246c003
commit a4ebf3e558
59 changed files with 5931 additions and 2961 deletions
@@ -1,4 +1,6 @@
 import React, { createContext, useState, useEffect } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
 export const Context = createContext();

 export const AppContext = (props) => {
@@ -11,6 +13,14 @@ export const AppContext = (props) => {
    const [isDocSearchModalOpen, setIsDocSearchModalOpen] = useState(false);
    const [leftSideBarOpenByClick, setLeftSideBarOpenByClick] = useState(currentLocation?.includes('/workflows/') ? false : true)
    const [windowWidth, setWindowWidth] = useState(serverside === true ? 100 : window.innerWidth);
+    const [brandColor, setBrandColor] = useState(() => localStorage.getItem("brandColor") || "#ff8544");
+    const [brandName, setBrandName] = useState(()=> localStorage.getItem("brandName") || "Shuffle");
+
+    const [themeMode, setThemeMode] = useState(
+      () => localStorage.getItem("theme") || "dark"
+    );
+    const [supportEmail, setSupportEmail] = useState("support@shuffler.io");
+    const [logoutUrl, setLogoutUrl] = useState("");

    useEffect(() => {
 		if (currentLocation?.includes('/workflows/') && leftSideBarOpenByClick === true) {
@@ -35,6 +45,57 @@ export const AppContext = (props) => {
        };
    }, []);

+    const handleThemeChange = (theme) => {
+      if (!theme || theme === "null" || theme === "undefined") {
+        localStorage.setItem("theme", "dark");
+        setThemeMode("dark");
+        return;
+      }
+    
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    
+      const applySystemTheme = () => {
+        const isDark = darkMediaQuery.matches;
+        setThemeMode(isDark ? "dark" : "light");
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+      };
+    
+      if (theme === "system") {
+        applySystemTheme();
+        darkMediaQuery.addEventListener("change", applySystemTheme);
+        return () => {
+          darkMediaQuery.removeEventListener("change", applySystemTheme);
+        };
+      } else {
+        setThemeMode(theme);
+        localStorage.setItem("theme", theme);
+      }
+    };
+    
+    
+    useEffect(() => {
+      if (serverside === true) return;
+    
+      const theme = localStorage.getItem("theme");
+    
+      if (!theme || theme === "null" || theme === "undefined") {
+        localStorage.setItem("theme", "dark");
+        setThemeMode("dark");
+        return;
+      }
+    
+      let cleanup;
+      if (theme === "system") {
+        cleanup = handleThemeChange("system");
+      } else {
+        handleThemeChange(theme);
+      }
+    
+      return () => {
+        if (cleanup) cleanup();
+      };
+    }, []);
+       

    return (
        <Context.Provider value={{
@@ -42,9 +103,20 @@ export const AppContext = (props) => {
            setIsDocSearchModalOpen,
            searchBarModalOpen,
            setSearchBarModalOpen,
+            supportEmail,
+            setSupportEmail,
+            logoutUrl,
+            setLogoutUrl,
            leftSideBarOpenByClick,
            setLeftSideBarOpenByClick,
-            windowWidth
+            windowWidth,
+            themeMode,
+            setThemeMode,
+            handleThemeChange,
+            brandColor,
+            setBrandColor,
+            brandName,
+            setBrandName,
        }}>
            {props.children}
        </Context.Provider>