use hook for background

src/components/ThemeProvider.tsx

@@ -21,13 +21,17 @@ type ThemeProviderProps = {
 type ThemeProviderState = {
   themes: Theme[];
   theme: Theme;
+  background: string;
   setTheme: (theme: Theme) => void;
+  setBackground: (background: string) => void;
 };
 
 const initialState: ThemeProviderState = {
   themes: themes,
   theme: "main",
-  setTheme: () => null
+  background: "",
+  setTheme: () => null,
+  setBackground: () => null
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
@@ -35,9 +39,13 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const defaultTheme = "main";
   const storageKey = "theme";
+  const bgKey = "background";
   const [theme, setTheme] = useState<Theme>(
     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
   );
+  const [background, setBackground] = useState<string>(() =>
+    localStorage.getItem(bgKey)
+  );
 
   useEffect(() => {
     const root = window.document.documentElement;
@@ -45,16 +53,20 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     themes.forEach((theme) => {
       root.classList.remove(theme);
     });
-
     root.classList.add(theme);
   }, [theme, themes]);
 
   const value = {
     theme,
     themes,
+    background,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
+    },
+    setBackground: (background: string) => {
+      localStorage.setItem(bgKey, background);
+      setBackground(background);
     }
   };
 

src/index.tsx

@@ -6,11 +6,10 @@ import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 
 import { useEffect, useState } from "preact/compat";
-import { ThemeProvider } from "./components/ThemeProvider";
+import { ThemeProvider, useTheme } from "./components/ThemeProvider";
 
 const Routes = lazy(() => import("./routes"));
 
-const theme = localStorage.getItem("theme") || "main";
 const particlesUrl = localStorage.getItem("particles") || "none";
 
 export default function App() {
@@ -30,42 +29,44 @@ export default function App() {
       setInit(true);
     });
   }, []);
-
+  const { background } = useTheme();
   const particlesLoaded = (container) => {
     console.log(container);
   };
-  const bgImage: string | undefined = localStorage.getItem("background");
   return (
-    <ThemeProvider>
-      <div class="h-screen w-screen">
-        {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: bgImage ? `url(${bgImage})` : "none",
-              backgroundSize: "contain",
-              backgroundRepeat: "repeat",
-              backgroundPosition: "center"
-            }}
-          >
-            {init && particlesUrl !== "none" && (
-              <Particles
-                id="tsparticles"
-                url={particlesUrl}
-                particlesLoaded={particlesLoaded}
-                class="bg-primary"
-              />
-            )}
-          </div>
-        </Suspense>
-      </div>
-    </ThemeProvider>
+    <div class="h-screen w-screen">
+      {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"
+          }}
+        >
+          {init && particlesUrl !== "none" && (
+            <Particles
+              id="tsparticles"
+              url={particlesUrl}
+              particlesLoaded={particlesLoaded}
+              class="bg-primary"
+            />
+          )}
+        </div>
+      </Suspense>
+    </div>
   );
 }
 
-render(<App />, document.getElementById("app"));
+render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>,
+  document.getElementById("app")
+);

src/pages/Settings/Customization.tsx

@@ -1,4 +1,5 @@
 import { useRef } from "preact/hooks";
+import { useTheme } from "../../components/ThemeProvider";
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import { useTranslation } from "react-i18next";
@@ -8,7 +9,7 @@ import ThemeDropdown from "./ThemeDropdown";
 function Customization({ id, active }) {
   const bgInput = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
-
+  const { background, setBackground } = useTheme();
   const particles = [
     { id: "none", label: t("settings.theme.particlesNone") },
     { id: "/crismas.json", label: t("themes.crismas") }
@@ -55,16 +56,11 @@ function Customization({ id, active }) {
           <input
             ref={bgInput}
             className="font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text"
-            defaultValue={localStorage.getItem("background")}
+            defaultValue={background}
             placeholder={t("settings.theme.backgroundNone")}
           />
           <button
-            onClick={() => {
-              if (bgInput) {
-                localStorage.setItem("background", bgInput.current.value);
-                window.location.reload();
-              }
-            }}
+            onClick={() => setBackground(bgInput.current.value)}
             className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg text-input-text"
           >
             {t("settings.theme.select")}

src/routes.tsx

@@ -19,7 +19,7 @@ export default function Routes() {
     "/wisp/"; // @TODO Japan - US ping
 
   if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.ready.then(async (sw) => {
+    navigator.serviceWorker.ready.then(async () => {
       //await registerRemoteListener(sw.active!)
       setTransport();
     });