fix: background integration (#64)

packages/nextjs/app/page.tsx

@@ -16,7 +16,7 @@ const Home: NextPage = () => {
 
   return (
     <>
-      <div className="relative flex justify-center items-center min-h-screen text-white overflow-hidden">
+      <div className="relative flex justify-center items-center min-h-screen overflow-hidden">
         <StarryBackground />
         <div className="relative text-center p-4 space-y-6 -z-5">
           <h1 className="text-5xl md:text-6xl font-extrabold mb-4">

packages/nextjs/components/Header.tsx

@@ -8,6 +8,7 @@ import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 import { usePathname } from "next/navigation";
 import StarryBackground from "../components/starryBackground/_components/StarryBackground";
+import ToggleMode from "./ToggleMode";
 
 type HeaderMenuLink = {
   label: string;
@@ -123,6 +124,9 @@ export const Header = () => {
             </ul>
           </div>
           <div className="flex ml-auto">
+            <ToggleMode />
+          </div>
+          <div className="flex mr-2">
             <CustomConnectButton />
           </div>
         </div>

packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx

@@ -13,8 +13,8 @@ import { useNativeCurrencyPrice } from "~~/hooks/scaffold-stark/useNativeCurrenc
 
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   useNativeCurrencyPrice();
-  const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark";
+  const { resolvedTheme, theme } = useTheme();
+  const isDarkMode = theme
   return (
     <>
       <div className="flex relative flex-col min-h-screen bg-main">

packages/nextjs/components/ToggleMode.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
+const ToggleMode = () => {
+  const { setTheme, theme } = useTheme(); 
+  const isDarkMode = theme === "dark"; 
+
+  const toggleMode = () => {
+    theme == "dark" ? setTheme("light") : setTheme("dark"); 
+  };
+
+  console.log("Current Theme:", theme);
+
+  return (
+    <button className="btn btn-ghost" onClick={toggleMode}>
+      {isDarkMode ? (
+        <MoonIcon className="h-6 w-6 text-yellow-400" />
+      ) : (
+        <SunIcon className="h-6 w-6 text-yellow-400" />
+      )}
+    </button>
+  );
+};
+
+export default ToggleMode;

packages/nextjs/components/starryBackground/_components/StarryBackground.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const StarryBackground = () => {
   return (
-    <div className="absolute inset-0 bg-gradient-to-b from-[#243B55] to-[#141E30] overflow-hidden">
+    <div className="absolute inset-0 overflow-hidden">
       <div
         className="absolute w-[1px] h-[1px] bg-transparent animate-stars"
         style={{

packages/nextjs/styles/globals.css

@@ -40,6 +40,7 @@ p {
   filter: blur(229px);
   position: absolute;
   top: 0;
+  display: none 
 }
 
 .circle-gradient-blue {
@@ -49,6 +50,7 @@ p {
   position: absolute;
   top: 0;
   right: 0;
+  display: none 
 }
 
 .border-gradient {
@@ -100,6 +102,7 @@ p {
   border-radius: 630px;
   background: #7353d2;
   filter: blur(229px);
+  display: none 
 }
 
 .circle-gradient-blue-dark {
@@ -109,6 +112,7 @@ p {
   position: absolute;
   top: 0;
   right: 0;
+  display: none 
 }
 
 @layer utilities {