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

app/src/components/ui/menu/menu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import { toggleTheme } from "../../../utils/theme";
 
 interface MenuBarProps {
   setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
@@ -22,6 +23,13 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
     }));
   };
 
+  function handleThemeChange(){
+    toggleTheme();
+    window.location.reload();
+  }
+
+  const savedTheme: string | null = localStorage.getItem("theme") || "light";
+
   return (
     <div
       className="menu-bar"
@@ -381,6 +389,22 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
           <div className="menu-button">Export as...</div>
         </div>
 
+        <div
+          className="menu-button-container"
+          onMouseEnter={() => setActiveMenu("theme")}
+          onMouseLeave={() => {
+            setActiveMenu(null);
+            setActiveSubMenu(null);
+          }}
+          onClick={() => {
+            handleThemeChange();
+          }}
+        >
+          <div className="menu-button">
+            Theme <div className="value">{savedTheme}</div>
+          </div>
+        </div>
+
         {/* Apps Menu */}
         {/* <div
           className="menu-button-container"