Refactor styles for improved theme management, enhance input components, and add scene styles

app/src/modules/scene/environment/ground.tsx

@@ -1,9 +1,9 @@
-import * as THREE from 'three';
 import { useToggleView } from '../../../store/store';
 import * as CONSTANTS from '../../../types/world/worldConstants';
 
 const Ground = ({ grid, plane }: any) => {
-    const { toggleView, setToggleView } = useToggleView();
+    const { toggleView } = useToggleView();
+    const savedTheme: string | null = localStorage.getItem('theme');
 
     return (
 
@@ -19,4 +19,4 @@ const Ground = ({ grid, plane }: any) => {
     )
 }
 
-export default Ground;
+export default Ground;

app/src/modules/scene/scene.tsx

@@ -1,11 +1,11 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Environment, KeyboardControls } from "@react-three/drei";
 
 import World from "./world/world";
 import Controls from "./controls/controls";
 import TransformControl from "./controls/transformControls";
-import PostProcessing from "./postProcessing/postProcessing"
+import PostProcessing from "./postProcessing/postProcessing";
 import Sun from "./environment/sky";
 import CamModelsGroup from "../collaboration/collabCams";
 import Shadows from "./environment/shadow";
@@ -15,33 +15,31 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import SelectionControls from "./controls/selection/selectionControls";
 import MeasurementTool from "./tools/measurementTool";
 import Simulation from "../simulation/simulation";
-import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets";
 
 // import Simulation from "./simulationtemp/simulation";
 import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
-import ProductionCapacity from "../../components/layout/3D-cards/cards/ProductionCapacity";
 import Dropped3dWidgets from "../../components/ui/componets/Dropped3dWidget";
-import { useWidgetSubOption } from "../../store/store";
 
 export default function Scene() {
-
-  const map = useMemo(() => [
-    { name: "forward", keys: ["ArrowUp", "w", "W"] },
-    { name: "backward", keys: ["ArrowDown", "s", "S"] },
-    { name: "left", keys: ["ArrowLeft", "a", "A"] },
-    { name: "right", keys: ["ArrowRight", "d", "D"] },
-  ], [])
+  const map = useMemo(
+    () => [
+      { name: "forward", keys: ["ArrowUp", "w", "W"] },
+      { name: "backward", keys: ["ArrowDown", "s", "S"] },
+      { name: "left", keys: ["ArrowLeft", "a", "A"] },
+      { name: "right", keys: ["ArrowRight", "d", "D"] },
+    ],
+    []
+  );
+  const savedTheme: string | null = localStorage.getItem("theme");
 
   return (
     <KeyboardControls map={map}>
       <Canvas
-        // style={{ width: "100vw", height: "100vh" }}
         eventPrefix="client"
         gl={{ powerPreference: "high-performance", antialias: true }}
         onContextMenu={(e) => {
           e.preventDefault();
         }}
-
       >
         <Dropped3dWidgets />
         <Controls />
@@ -52,7 +50,7 @@ export default function Scene() {
         <ZoneCentreTarget />
         <Simulation />
         <PostProcessing />
-        <Sun />
+        {savedTheme !== "dark" && <Sun />}
         <Shadows />
         <CamModelsGroup />
         <MqttEvents />