Improve the dark mode

packages/studio/src/GlobalStyles.jsx

@@ -37,8 +37,8 @@ export default createGlobalStyle`
   html, body {
     box-sizing: border-box;
     background-color: white;
-    color: #444;
-    fill: #444;
+        color: var(--text-color);
+        fill: var(--text-color);
     scroll-behavior: smooth;
   }
 
@@ -49,6 +49,9 @@ export default createGlobalStyle`
     }
 
 :root {
+    --text-color: #444;
+    --bg-color-secondary: white;
+
     --color-primary: rgb(90, 130, 150);
     --color-primary-light: rgb(170, 190, 200);
     --color-primary-dark: rgb(60, 90, 110);
@@ -61,6 +64,8 @@ export default createGlobalStyle`
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #1e1e1e;
+    --bg-color-secondary: #2e2e2e;
+    --text-color: #f2f2f2;
   }
 }
 

packages/studio/src/InfiniteGrid.jsx

@@ -1,6 +1,8 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import * as THREE from "three";
 import { Plane } from "@react-three/drei";
+import { useDarkMode } from "./utils/useDarkMode";
+import { useThree } from "@react-three/fiber";
 //
 //
 // Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
@@ -101,5 +103,14 @@ const infiniteGridMaterial = function InfiniteGridMaterial({
 
 export default () => {
   const material = useRef(infiniteGridMaterial());
+  const isDarkMode = useDarkMode();
+  const { invalidate } = useThree();
+
+  useEffect(() => {
+    material.current.uniforms.uColor.value = new THREE.Color(
+      isDarkMode ? "lightgrey" : "grey"
+    );
+    invalidate();
+  }, [isDarkMode, invalidate]);
   return <Plane material={material.current} />;
 };

packages/studio/src/Welcome.jsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 const Main = styled.div`
   width: 100%;
   min-height: 100%;
+  background-color: var(--bg-color);
 `;
 
 const Hero = styled.div`
@@ -55,6 +56,12 @@ const BoxCard = styled(Link)`
   &: hover {
     background-color: var(--color-primary-light);
   }
+
+  @media (prefers-color-scheme: dark) {
+    &: hover {
+      background-color: var(--color-primary-dark);
+    }
+  }
 `;
 
 const BoxTitle = styled.div`

packages/studio/src/components/Dialog.jsx

@@ -53,7 +53,7 @@ const DialogBox = styled.div`
   display: flex;
   flex-direction: column;
 
-  background: #fff;
+  background: var(--bg-color);
   border: 1px solid #ccc;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   outline: none;

packages/studio/src/components/FloatingInfo.jsx

@@ -7,13 +7,15 @@ export const InfoTopRight = styled.div`
   top: 3.5em;
   right: 2em;
   max-width: 300px;
-  padding: 10px;
+  padding: 8px;
   border-radius: 10px;
   max-height: calc(100% - 5em);
   overflow-y: auto;
 
   ${(props) =>
-    props.noBg ? "" : `background-color: white; border: 1px solid lightgrey;`}
+    props.noBg
+      ? ""
+      : `background-color: var(--bg-color); border: 1px solid lightgrey;`}
 `;
 
 export const InfoBottomLeft = styled(InfoTopRight)`

packages/studio/src/utils/useDarkMode.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+export function useDarkMode() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Create the media query inside useEffect to ensure browser environment
+    const mediaQuery = window?.matchMedia("(prefers-color-scheme: dark)");
+
+    if (!mediaQuery) {
+      return;
+    }
+
+    // Define the change handler
+    const handleChange = (event) => {
+      setIsDarkMode(event.matches);
+    };
+
+    // Add the listener
+    mediaQuery.addEventListener("change", handleChange);
+
+    // Set initial value
+    setIsDarkMode(mediaQuery.matches);
+
+    // Clean up
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return isDarkMode;
+}

packages/studio/src/visualiser/Editor.jsx

@@ -43,7 +43,7 @@ const Select = styled.select`
 
 const ErrorOverlay = styled(InfoBottomLeft)`
   border-color: red;
-  background-color: white;
+  background-color: var(--bg-color);
   border-width: 2px;
   max-height: initial;
   max-width: 50vw;
@@ -61,11 +61,13 @@ const ErrorOverlay = styled(InfoBottomLeft)`
     font-size: 0.6em;
     overflow-x: auto;
     padding: 1em;
+    color: #444;
     background-color: #f2e0de;
   }
 `;
 
 const CenterInfo = styled.div`
+  background-color: var(--bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;

packages/studio/src/visualiser/editor/ParamsEditor.jsx

@@ -52,7 +52,7 @@ export default observer(function ParamsEditor({
         colors: {
           elevation1: "white",
           elevation2: "var(--bg-color)",
-          elevation3: "white", // bg color of the root panel (main title bar)
+          elevation3: "var(--bg-color-secondary)", // bg color of the root panel (main title bar)
 
           highlight1: "var(--color-primary)",
           highlight2: "var(--color-primary)",
@@ -65,8 +65,8 @@ export default observer(function ParamsEditor({
           vivid1: "red",
         },
         sizes: {
-          controlWidth: "80px"
-        }
+          controlWidth: "80px",
+        },
       }}
     />
   );

packages/studio/src/workbench/EditorPane.jsx

@@ -45,6 +45,7 @@ export const ErrorOverlay = styled.div`
     font-size: 0.6em;
     overflow-x: auto;
     padding: 1em;
+    color: #444;
     background-color: #f2e0de;
   }
 `;

packages/studio/src/workbench/Workbench.jsx

@@ -52,6 +52,12 @@ const WorkbenchWrapper = styled.div`
   & .custom-gutter-theme {
     background-color: var(--color-primary-light);
   }
+
+  @media (prefers-color-scheme: dark) {
+    & .custom-gutter-theme {
+      background-color: var(--bg-color);
+    }
+  }
 `;
 
 export default function Workbench() {