From 6b5e863461e7d2034ec08a4562fc749916b2a87b Mon Sep 17 00:00:00 2001
From: incognitotgt <tgt@incognitotgt.me>
Date: Mon, 15 Apr 2024 19:48:16 -0400
Subject: [PATCH] fix background issue

---
 src/components/ThemeProvider.tsx |  6 +++++-
 src/index.tsx                    | 19 ++++---------------
 src/style.css                    |  8 ++++++++
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 71b1567..6592ca8 100644
--- a/src/components/ThemeProvider.tsx
+++ b/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,
diff --git a/src/index.tsx b/src/index.tsx
index 03e8377..51c0d90 100644
--- a/src/index.tsx
+++ b/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"
-          style={{
-            backgroundImage: `url(${background})`,
-            backgroundSize: "contain",
-            backgroundRepeat: "repeat",
-            backgroundPosition: "center"
-          }}
-        >
+        <Routes />
+        <div className="z-10 h-full w-full bg-primary">
           {init && particlesUrl !== "none" && (
             <Particles
               id="tsparticles"
diff --git a/src/style.css b/src/style.css
index f8d13dc..454bc6c 100644
--- a/src/style.css
+++ b/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;