fix default

src/components/background/AppBackground.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePatternBackground } from "@/components/background/PatternBackgroundProvider";
+import usePreference from "@/hooks/helpers/usePreference";
 import { THEME_BG_ELEMENT_ID } from "@/lib/helpers/themeCache";
 import { useLayoutEffect } from "react";
 
@@ -8,11 +9,12 @@ const THEME_BG_IMG_ID = "cached-theme-bg-img";
 const THEME_BG_OVERLAY_ID = "cached-theme-bg-overlay";
 
 export default function AppBackground() {
+  const { state: nightMode } = usePreference("night-mode", false);
   const { isPattern, backgroundStyle, isCustomImage, customImageSettings } =
     usePatternBackground();
 
   useLayoutEffect(() => {
-    if (!isPattern && !isCustomImage) {
+    if (nightMode || (!isPattern && !isCustomImage)) {
       document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
       return;
     }
@@ -75,7 +77,7 @@ export default function AppBackground() {
       overlayLayer.style.backgroundColor =
         overlayOpacity > 0 ? `rgba(0,0,0,${overlayOpacity})` : "";
     }
-  }, [backgroundStyle, isPattern, isCustomImage, customImageSettings]);
+  }, [backgroundStyle, isCustomImage, isPattern, customImageSettings, nightMode]);
 
   return null;
 }

src/components/background/PatternBackgroundProvider.tsx

@@ -2,6 +2,7 @@
 
 import { useGetAbout } from "@/app/[name]/(Main)/about/hooks/useAboutData";
 import {
+  applyColorBackgroundCssVariables,
   applyCustomImageCssVariables,
   applyPatternCssVariables,
   clearCustomImageCssVariables,
@@ -12,9 +13,11 @@ import {
   PATTERN_BACKGROUND_OPACITY,
   resolveBgType,
 } from "@/lib/helpers/backgroundUtils";
+import usePreference from "@/hooks/helpers/usePreference";
 import {
   applyCachedThemeToDom,
   buildThemeCacheFromRestaurant,
+  clearRestaurantBackgroundOverrides,
   getThemeCache,
   removeCachedThemeBackground,
   setThemeCache,
@@ -59,6 +62,7 @@ const PatternBackgroundContext = createContext<PatternBackgroundContextValue>({
 
 export function PatternBackgroundProvider({ children }: { children: ReactNode }) {
   const { name: restaurantSlug } = useParams<{ name: string }>();
+  const { state: nightMode } = usePreference("night-mode", false);
   const { data: aboutData } = useGetAbout();
   const restaurant = aboutData?.data;
   const [hydratedCache, setHydratedCache] = useState<CachedRestaurantTheme | null>(null);
@@ -70,8 +74,8 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
       ? resolveBgType(hydratedCache)
       : "color";
 
-  const isPattern = bgType === "pattern";
-  const isCustomImage = bgType === "custom";
+  const isPattern = !nightMode && bgType === "pattern";
+  const isCustomImage = !nightMode && bgType === "custom";
   const menuColor =
     restaurant?.menuColor || hydratedCache?.menuColor || DEFAULT_MENU_COLOR;
   const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
@@ -85,10 +89,10 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
     if (!cached) return;
 
     applyCachedThemeToDom(cached);
-    if (cached.patternDataUrl) {
+    if (!nightMode && cached.patternDataUrl) {
       setPatternImageUrl(cached.patternDataUrl);
     }
-  }, [restaurantSlug]);
+  }, [nightMode, restaurantSlug]);
 
   useEffect(() => {
     if (!restaurantSlug) {
@@ -99,16 +103,24 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
       return;
     }
 
+    if (nightMode) {
+      clearPatternCssVariables();
+      clearCustomImageCssVariables();
+      clearRestaurantBackgroundOverrides();
+      setPatternImageUrl(null);
+      return;
+    }
+
     if (!restaurant) return;
 
     const themeBase = buildThemeCacheFromRestaurant(restaurant);
     const currentBgType = themeBase.bgType;
 
     if (currentBgType === "color") {
-      clearPatternCssVariables();
       clearCustomImageCssVariables();
       removeCachedThemeBackground();
       setPatternImageUrl(null);
+      applyColorBackgroundCssVariables(menuColor);
       setThemeCache(restaurantSlug, { ...themeBase, patternDataUrl: null });
       return;
     }
@@ -192,7 +204,7 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode })
     return () => {
       cancelled = true;
     };
-  }, [menuColor, restaurant, restaurantSlug]);
+  }, [menuColor, nightMode, restaurant, restaurantSlug]);
 
   const backgroundStyle = useMemo<CSSProperties>(
     () => ({

src/components/wrapper/PreferenceWrapper.tsx

@@ -9,6 +9,7 @@ import { hexToOklch, calculateBrightness } from '@/lib/helpers/colorUtils';
 import {
     applyCachedThemeToDom,
     buildThemeCacheFromRestaurant,
+    clearRestaurantBackgroundOverrides,
     getCachedMenuColor,
     getThemeCache,
     setThemeCache,
@@ -143,6 +144,11 @@ function PreferenceWrapper({ children }: Props) {
             patternDataUrl: cached?.patternDataUrl ?? null,
         });
 
+        const updatedTheme = getThemeCache(restaurantSlug);
+        if (updatedTheme) {
+            applyCachedThemeToDom(updatedTheme);
+        }
+
         if (restaurant.logo) {
             localStorage.setItem('restaurant-logo', restaurant.logo);
         }
@@ -164,7 +170,19 @@ function PreferenceWrapper({ children }: Props) {
 
     useEffect(() => {
         document.documentElement.setAttribute('data-theme', nightMode ? 'dark' : 'light');
-    }, [nightMode]);
+
+        if (nightMode) {
+            clearRestaurantBackgroundOverrides();
+            return;
+        }
+
+        if (!restaurantSlug) return;
+
+        const cached = getThemeCache(restaurantSlug);
+        if (cached) {
+            applyCachedThemeToDom(cached);
+        }
+    }, [nightMode, restaurantSlug]);
 
     const splashLogo = mounted
         ? (aboutData?.data?.logo || cachedLogo || undefined)