Added dark theme to home and block sphere page (#38)

Author: Samyak-SS

package.json

@@ -1,5 +1,13 @@
 {
   "dependencies": {
-    "three": "^0.179.1"
+    "react": "^18.x",
+    "react-dom": "^18.x",
+    "three": "^0.179.1"   
+  },
+  "devDependencies": {
+    "vite": "^4.x",
+    "tailwindcss": "^3.x",
+    "postcss": "^8.x",
+    "autoprefixer": "^10.x"
   }
 }

qubitverse/simulator/gates/gates.hh

@@ -6,9 +6,12 @@
 
 #ifndef SIMULATOR_GATES
 #define SIMULATOR_GATES
+#define _USE_MATH_DEFINES
+
 
 #include <complex>
 #include <random>
+
 #include <cmath> // for sqrt and M_PI
 
 namespace simulator

qubitverse/visualizer/package.json

@@ -20,19 +20,22 @@
     "react-konva": "^19.0.3",
     "recharts": "^2.15.1",
     "tailwind": "^4.0.0",
-    "tailwindcss": "^4.0.12",
     "three": "^0.179.1",
     "vis-network": "^9.1.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/postcss": "^4.1.12",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.12",
     "vite": "^6.2.0"
   }
 }

qubitverse/visualizer/src/App.jsx

@@ -1,24 +1,35 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import QuantumCircuit from "./components/QuantumCircuit";
 import "./App.css";
 import Navbar from "./components/Navbar";
 import NQubitInput from "./components/NQubitInput";
 import BlochSphere from "./components/BlochSphere";
-
+import './index.css';
 function App() {
   const [nQubits, setNQubits] = useState(null);
   const [showBloch, setShowBloch] = useState(false);
+  const [darkTheme, setDarkTheme] = useState(false);
+
+  useEffect(()=>{
+    if(darkTheme){
+      document.documentElement.classList.add("dark");
+    }else{
+      document.documentElement.classList.remove("dark");
+    }
+  }, [darkTheme]);
 
   return (
     <>
       <Navbar
         onBlochToggle={() => setShowBloch(!showBloch)}
         isBlochActive={showBloch}
+        darkTheme={darkTheme}
+        setDarkTheme={setDarkTheme}
       />
       {showBloch ? (
         <BlochSphere key="bloch-sphere" />
       ) : nQubits === null ? (
-        <NQubitInput numQubits={nQubits} setQubits={setNQubits} />
+        <NQubitInput numQubits={nQubits} setQubits={setNQubits} darkTheme={darkTheme} />
       ) : (
         <QuantumCircuit numQubits={nQubits} setNumQubits={setNQubits} />
       )}