refactor: add body clicked switch panel setting

Author: NdekoCode

src/components/Partials/ThemeSettings.jsx

@@ -9,8 +9,14 @@ const ThemeSettings = () => {
   const { currentColor, setColor, setMode, currentMode, setThemeSettings } =
     StateContext();
   return (
-    <div className="bg-half-transparent w-screen fixed nav-item top-0 right-0">
-      <div className="float-right h-screen dark:text-gray-200 bg-white dark:[#484B52] w-400">
+    <div
+      className="bg-half-transparent w-screen fixed nav-item top-0 right-0"
+      onClick={setThemeSettings}
+    >
+      <div
+        className="float-right h-screen dark:text-gray-200 bg-white dark:[#484B52] w-400"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="flex items-center justify-between p-4 ml-4">
           <h4 className="font-semibold text-xl">Settings</h4>
           <button

src/libs/context/AppContext.jsx

@@ -19,9 +19,9 @@ export const StateContextProvider = memo(({ children }) => {
     setCurrentMode(e.target.value);
     localStorage.setItem("theme", e.target.value);
   };
-  const setColor = (e) => {
-    setCurrentColor(e.target.value);
-    localStorage.setItem("color", e.target.value);
+  const setColor = (value) => {
+    setCurrentColor(value);
+    localStorage.setItem("color", value);
   };
   const [screenSize, handleSize] = useResize();
   const handleCloseSideBar = useCallback(() => {