fixed: hydration error in Time and Background

components/background.tsx

@@ -3,21 +3,18 @@
 import { useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import { bgFocusState } from "./state/background";
-
-import dynamic from "next/dynamic";
-
-const Background = dynamic(() => import("./backgroundContainer"), { ssr: false });
+import BackgroundContainer from "./backgroundContainer";
 
 export default function () {
     const [isFocus, setFocus] = useRecoilState(bgFocusState);
-    const [colorScheme, setColorScheme] = useState("light");
+    const [darkMode, setDarkMode] = useState(false);
 
     useEffect(() => {
         const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-        setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+        setDarkMode(colorSchemeQueryList.matches ? true : false);
 
         const handleChange = () => {
-            setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+            setDarkMode(colorSchemeQueryList.matches ? true : false);
         };
 
         colorSchemeQueryList.addEventListener("change", handleChange);
@@ -26,22 +23,12 @@ export default function () {
             colorSchemeQueryList.removeEventListener("change", handleChange);
         };
     }, []);
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-    }, []);
     return (
         <div suppressHydrationWarning>
-            {isClient && (
-                <div>
-                    {colorScheme === "dark" && (
-                        <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
-                    )}
-                    {colorScheme === "light" && (
-                        <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />
-                    )}
-                </div>
+            {darkMode ? (
+                <BackgroundContainer src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} darkMode={darkMode}/>
+            ) : (
+                <BackgroundContainer src="white" isFocus={isFocus} onClick={() => setFocus(false)} darkMode={darkMode}/>
             )}
         </div>
     );

components/backgroundContainer.tsx

@@ -4,11 +4,7 @@ import { settingsState } from "./state/settings";
 import validUrl from "valid-url";
 import validateColor from "validate-color";
 
-export default function(props: {
-    isFocus: boolean;
-    src: string;
-    onClick: () => void;
-}) {
+export default function (props: { isFocus: boolean; src: string; darkMode: boolean; onClick: () => void }) {
     const settings = useRecoilValue(settingsState);
     if (validateColor(props.src)) {
         return (
@@ -24,16 +20,28 @@ export default function(props: {
                 src={props.src}
                 className={
                     "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
-                    (props.isFocus
-                        ? settings.bgBlur
-                            ? "blur-lg scale-110"
-                            : "brightness-50 scale-105"
-                        : "")
+                    (props.isFocus ? (settings.bgBlur ? "blur-lg scale-110" : "brightness-50 scale-105") : "")
                 }
                 alt="background"
                 onClick={props.onClick}
                 fill={true}
             />
         );
+    } else {
+        if (props.darkMode) {
+            return (
+                <div
+                    className="w-full h-full fixed object-cover inset-0 duration-200 z-0 bg-[rgb(23,25,29)]"
+                    onClick={props.onClick}
+                ></div>
+            );
+        } else {
+            return (
+                <div
+                    className="w-full h-full fixed object-cover inset-0 duration-200 z-0 bg-white"
+                    onClick={props.onClick}
+                ></div>
+            );
+        }
     }
-}
+}

components/index.tsx

@@ -5,12 +5,17 @@ import { useRecoilState, useSetRecoilState } from "recoil";
 import { settingsState } from "./state/settings";
 import Search from "./search/search";
 import { bgFocusState } from "./state/background";
-import Time from "./time";
 import loadSettings from "@/lib/loadSettings";
 import EngineSelector from "./search/engineSelector";
 import Onesearch from "./search/onesearch/onesearch";
-import Background from "./background";
+import dynamic from "next/dynamic";
 
+const Background = dynamic(() => import("./background"), {
+    ssr: false
+});
+const Time = dynamic(() => import("./time"), {
+    ssr: false
+});
 
 export default function Homepage() {
     const [settings, setSettings] = useRecoilState(settingsState);
@@ -20,17 +25,17 @@ export default function Homepage() {
         loadSettings(setSettings);
     }, [setSettings]);
 
-
     return (
         <div className="h-full fixed overflow-hidden w-full bg-black">
             <Time showSecond={settings.timeShowSecond} />
-            <EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
+            <EngineSelector
+                className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
             left-1/2 w-11/12 sm:w-[700px] text:black text-right
-            dark:text-white text-3xl text-shadow-lg z-10"/>
+            dark:text-white text-3xl text-shadow-lg z-10"
+            />
             <Background />
             <Search onFocus={() => setFocus(true)} />
             <Onesearch />
-            <p className="z-20 relative text-white text-2xl">FUCK YOU SSR</p>
         </div>
     );
 }