fix background issue

src/components/ThemeProvider.tsx

@@ -54,7 +54,11 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
       root.classList.remove(theme);
     });
     root.classList.add(theme);
-  }, [theme, themes]);
+    document.documentElement.style.setProperty(
+      "--background-image",
+      `url(${background})`
+    );
+  }, [theme, themes, background]);
 
   const value = {
     theme,

src/index.tsx

@@ -6,7 +6,7 @@ import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 
 import { useEffect, useState } from "preact/compat";
-import { ThemeProvider, useTheme } from "./components/ThemeProvider";
+import { ThemeProvider } from "./components/ThemeProvider";
 
 const Routes = lazy(() => import("./routes"));
 
@@ -29,27 +29,16 @@ export default function App() {
       setInit(true);
     });
   }, []);
-  const { background } = useTheme();
   const particlesLoaded = (container) => {
     console.log(container);
   };
   return (
-    <div class="h-screen w-screen">
+    <div>
       {window.location.origin === "https://nebulaproxy.io" && <Meta />}
       {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
       <Suspense fallback={<LoadSuspense />}>
-        <div className="absolute z-20 h-full w-full">
         <Routes />
-        </div>
+        <div className="z-10 h-full w-full bg-primary">
-        <div
-          className="z-10 h-full w-full bg-primary"
-          style={{
-            backgroundImage: `url(${background})`,
-            backgroundSize: "contain",
-            backgroundRepeat: "repeat",
-            backgroundPosition: "center"
-          }}
-        >
           {init && particlesUrl !== "none" && (
             <Particles
               id="tsparticles"

src/style.css

@@ -6,6 +6,7 @@
 @layer base {
   :root,
   .main {
+    --background-image: url();
     --background-primary: #191724;
     --background-lighter: #16121f;
     --navbar-color: #26233a;
@@ -120,6 +121,13 @@
     --active-color: #8839ef !important;
   }
 }
+body {
+  @apply bg-primary;
+  background-image: var(--background-image);
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
+}
 
 .font-inter {
   font-family: "Inter", sans-serif;