implement light switch for the graph

Author: mustafasoylu

src/components/Graph.tsx

@@ -7,7 +7,7 @@ import { getGroupColor } from "../utils";
 import FullScreenButton from "./FullScreenButton.tsx";
 import { useCallback, useEffect, useRef, useState } from "react";
 import ResetViewButton from "./ResetViewButton.tsx";
-
+import ThemeSwitch   from "./ThemeSwitch.tsx";
 interface GraphProps {
   graphData: GraphData;
   width: number;
@@ -18,6 +18,7 @@ const Graph: React.FC<GraphProps> = ({ graphData, width, height }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [graphWidth, setGraphWidth] = useState(width);
   const [graphHeight, setGraphHeight] = useState(height);
+  const [switchOn, setSwitchOn] = useState<boolean>(false);
 
   const fgRef = useRef<any>(null);
 
@@ -102,6 +103,7 @@ const Graph: React.FC<GraphProps> = ({ graphData, width, height }) => {
         linkCurvature={0.3}
         linkOpacity={0.5}
         linkWidth={5}
+        backgroundColor={switchOn ? "#ffffff" : "#000000"}
         nodeThreeObject={({ group }) => {
           const geometry =
             group === "" ? new THREE.BoxGeometry(8, 8, 8) : new THREE.SphereGeometry(5);
@@ -117,6 +119,7 @@ const Graph: React.FC<GraphProps> = ({ graphData, width, height }) => {
       />
       <FullScreenButton isFullScreen={isFullScreen} setIsFullScreen={setIsFullScreen} />
       <ResetViewButton resetView={handleResetView} />
+      <ThemeSwitch switchOn={switchOn} setSwitchOn={setSwitchOn} />
       <Legend />
     </Box>
   );

src/components/Layout.tsx

@@ -15,20 +15,15 @@ export default function Layout({ children }: LayoutProps) {
   });
 
   return (
-    <Flex
-      minHeight="100vh"
-      display="flex"
-      flexDirection="column"
-      width="100%"
-      overflowX="hidden" // Prevents horizontal overflow
-    >
+    <Flex minHeight="100vh" flexDirection="column" width="100%" overflowX="hidden">
       <Navbar />
       <Box
+        as="main"
         flex="1"
         width={contentWidth}
         mx="auto"
         justifyContent="center"
-        overflowX="hidden" // Prevents content overflow
+        overflowX="hidden"
       >
         {children}
       </Box>

src/components/ThemeSwitch.tsx

@@ -0,0 +1,24 @@
+import {Switch, Flex } from '@chakra-ui/react';
+import * as React from 'react';
+
+type ThemeSwitchProps = {
+  switchOn: boolean;
+  setSwitchOn: (isSwitchOn: boolean) => void;
+}
+
+const ThemeSwitch = ({ switchOn, setSwitchOn }: ThemeSwitchProps) => {
+  const handleSwitchChange = (event: React. ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setSwitchOn(true);
+    } else {
+      setSwitchOn(false);
+    }
+  }
+  return (
+    <Flex position="absolute" left="10px" top="110px" padding="10px" flexDirection="column">
+      <Switch isChecked={switchOn} onChange={handleSwitchChange} size='lg' />
+    </Flex>
+  );
+};
+
+export default ThemeSwitch;