Save color mode in session cookie (zincware#542)

* draft

* code review

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix zincware#535

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

app/src/App.tsx

@@ -33,6 +33,7 @@ import * as THREE from "three";
 import { Line3D, VirtualCanvas } from "./components/lines";
 import ControlsBuilder from "./components/transforms";
 import { ParticleInfoOverlay, SceneInfoOverlay } from "./components/overlays";
+import { useColorMode } from "./components/utils";
 
 export default function App() {
   // const [isConnected, setIsConnected] = useState(socket.connected);
@@ -93,7 +94,7 @@ export default function App() {
   );
   // TODO: initial values are wrong for orbitcontrolstarget and camperaPosition
   // todo give to particles and bonds
-  const [colorMode, setColorMode] = useState<string>("light");
+  const [colorMode, handleColorMode] = useColorMode();
   const [hoveredId, setHoveredId] = useState<number>(null);
 
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(true);
@@ -356,6 +357,7 @@ export default function App() {
   }, []);
 
   useEffect(() => {
+    // page initialization
     const updateLength = () => {
       socket.emit("room:length:get", (data: number) => {
         setLength(data);
@@ -663,6 +665,7 @@ export default function App() {
             <PerParticleVectors
               frame={currentFrame}
               property={sceneSettings.vectors}
+              colorMode={colorMode}
             ></PerParticleVectors>
           )}
         </Canvas>
@@ -671,7 +674,7 @@ export default function App() {
         <HeadBar
           room={roomName}
           colorMode={colorMode}
-          setColorMode={setColorMode}
+          handleColorMode={handleColorMode}
           setIsDrawing={setIsDrawing}
           setGeometries={setGeometries}
           setPoints={setPoints}

app/src/components/headbar.tsx

@@ -344,7 +344,7 @@ const FileUpload = forwardRef((props, ref) => {
 const HeadBar = ({
   room,
   colorMode,
-  setColorMode,
+  handleColorMode,
   setIsDrawing,
   setGeometries,
   setPoints,
@@ -357,7 +357,7 @@ const HeadBar = ({
 }: {
   room: string;
   colorMode: string;
-  setColorMode: any;
+  handleColorMode: any;
   setIsDrawing: any;
   setGeometries: any;
   setPoints: any;
@@ -391,14 +391,6 @@ const HeadBar = ({
     setConsoleShow(showSiMGen);
   }, [showSiMGen]);
 
-  const handleColorMode = () => {
-    setColorMode(colorMode === "light" ? "dark" : "light");
-    document.documentElement.setAttribute(
-      "data-bs-theme",
-      colorMode === "light" ? "dark" : "light",
-    );
-  };
-
   const handleRemovePointsGeometries = () => {
     console.log("remove points and geometries");
     socket.emit("room:geometry:set", []);

app/src/components/particles.tsx

@@ -511,17 +511,19 @@ export const SimulationCell = ({
 interface PerParticleVectorsProps {
   frame: Frame | undefined;
   property: string;
+  colorMode: string;
 }
 
 export const PerParticleVectors: React.FC<PerParticleVectorsProps> = ({
   frame,
   property,
+  colorMode,
 }) => {
   const [vectors, setVectors] = useState<
     { start: THREE.Vector3; end: THREE.Vector3 }[]
   >([]);
 
-  const LineColor = "black";
+  const LineColor = colorMode === "light" ? "#454b66" : "#f5fdc6";
   const LineWidth = 2;
   const LineScale = 1;
 

app/src/components/utils.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+export const useColorMode = (): [string, () => void] => {
+  const [colorMode, setColorMode] = useState<string>("light");
+
+  useEffect(() => {
+    const theme =
+      localStorage.getItem("theme") ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light");
+    setTheme(theme, setColorMode);
+  }, []);
+
+  const handleColorMode = () => {
+    const newColorMode = colorMode === "light" ? "dark" : "light";
+    setTheme(newColorMode, setColorMode);
+    localStorage.setItem("theme", newColorMode);
+  };
+
+  return [colorMode, handleColorMode];
+};
+
+const setTheme = (
+  theme: string,
+  setColorMode: (mode: string) => void,
+): void => {
+  document.documentElement.setAttribute("data-bs-theme", theme);
+  setColorMode(theme);
+};