chore: fix folor in dark and light

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/components/PhysicsSimulation.tsx

@@ -20,6 +20,13 @@ export function World() {
         .trim();
     }
   };
+  const getFgColor = () => {
+    if (typeof window !== "undefined") {
+      return getComputedStyle(document.documentElement)
+        .getPropertyValue("--color-foreground")
+        .trim();
+    }
+  };
 
   useEffect(() => {
     const container = containerRef.current;
@@ -30,6 +37,7 @@ export function World() {
     const width = container.offsetWidth;
     const height = container.offsetHeight;
     const bgColor = getBgColor();
+    const fgColor = getFgColor();
 
     const {
       Engine,
@@ -117,16 +125,18 @@ export function World() {
     });
 
     let pills: Matter.Body[] = [];
-    const pillsToRender = [
-      "ENGINEERING MANAGER",
-      "NIX",
-      "PRINCIPAL ENGINEER",
-      "AI",
+    const pillsToRenderInfo = [
+      { text: "ENGINEERING MANAGER" },
+      { text: "PRINCIPAL ENGINEER" },
+      { text: "NIX", chamferRadius: 20 },
+      { text: "AI", chamferRadius: 20 },
     ];
 
-    pillsToRender.forEach(function (pillText) {
+    pillsToRenderInfo.forEach(function (pillInfo) {
       const fontSize = 32;
 
+      const pillText = pillInfo.text;
+
       const ctx = render.canvas.getContext("2d");
       ctx.font = `${fontSize}px Arial`;
       const textWidth = ctx.measureText(pillText).width;
@@ -134,20 +144,21 @@ export function World() {
       const pillHeight = fontSize * 2;
       const pillWidth = textWidth + pillHeight;
       [randomX, randomY] = getRandomXY(width, height, radius);
+      const chamferRadius = pillInfo.chamferRadius || pillHeight / 2;
       const pill = Matter.Bodies.rectangle(
         randomX,
         randomY,
         pillWidth,
         pillHeight,
         {
-          chamfer: { radius: pillHeight / 2 },
+          chamfer: { radius: chamferRadius },
           isStatic: false,
           density: 0.001,
           friction: 0.05,
           frictionAir: 0.01,
           render: {
             fillStyle: "rgba(255, 255, 255, 0)", // transparent fill
-            strokeStyle: "#000000", // black border
+            strokeStyle: fgColor, // black border
             lineWidth: 1,
           },
         },
@@ -164,7 +175,7 @@ export function World() {
         alignItems: "center",
         fontFamily: "Space Mono",
         fontSize: `${fontSize}px`,
-        color: "black",
+        color: fgColor,
         pointerEvents: "none",
       });
       text.innerText = pillText;