Fixed nextTheme detection

Author: Rajat

apps/web/components/public/base-layout/template/widget-by-name.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import widgets from "@/ui-config/widgets";
 import { COMPONENT_MISSING_SUFFIX } from "@/ui-config/strings";
 import WidgetErrorBoundary from "@/components/public/base-layout/template/widget-error-boundary";
@@ -13,10 +13,21 @@ const WidgetByName = ({
     pageData,
     editing = false,
 }: Omit<WidgetProps<WidgetDefaultSettings>, "toggleTheme" | "nextTheme">) => {
-    const { resolvedTheme: nextTheme, setTheme: setNextTheme } = useTheme();
+    const { resolvedTheme, setTheme: setNextTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        // This is the recommended pattern from next-themes to avoid hydration mismatch.
+        // The effect intentionally runs once to trigger a re-render with the correct theme.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setMounted(true);
+    }, []);
+
+    // Use undefined during SSR/hydration to match server, then switch to actual theme after mount
+    const nextTheme = mounted ? resolvedTheme : undefined;
 
     const toggleTheme = () => {
-        const themeNext = nextTheme === "dark" ? "light" : "dark";
+        const themeNext = resolvedTheme === "dark" ? "light" : "dark";
         setNextTheme(themeNext);
     };
 

packages/components-library/src/section-background-panel.tsx

@@ -146,8 +146,7 @@ export function SectionBackgroundPanel({
                                         value={value.backgroundColor || ""}
                                         onChange={(color) =>
                                             handleColorBackgroundChange({
-                                                backgroundColor:
-                                                    color || "#ffffff",
+                                                backgroundColor: color,
                                             })
                                         }
                                     />