feat: implement dark mode

frontend/web/src/App.tsx

@@ -1,3 +1,4 @@
+import { useColorScheme } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 import DemoBanner from "./components/DemoBanner";
@@ -7,6 +8,7 @@ import useUserStore from "./stores/v1/user";
 import { WorkspaceSetting } from "./types/proto/api/v2/workspace_service";
 
 function App() {
+  const { mode } = useColorScheme();
   const userStore = useUserStore();
   const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(WorkspaceSetting.fromPartial({}));
   const [loading, setLoading] = useState(true);
@@ -47,6 +49,39 @@ function App() {
     document.body.insertAdjacentElement("beforeend", styleEl);
   }, [workspaceSetting.customStyle]);
 
+  useEffect(() => {
+    const root = document.documentElement;
+    if (mode === "light") {
+      root.classList.remove("dark");
+    } else if (mode === "dark") {
+      root.classList.add("dark");
+    } else {
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      if (darkMediaQuery.matches) {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+
+      const handleColorSchemeChange = (e: MediaQueryListEvent) => {
+        if (e.matches) {
+          root.classList.add("dark");
+        } else {
+          root.classList.remove("dark");
+        }
+      };
+      try {
+        darkMediaQuery.addEventListener("change", handleColorSchemeChange);
+      } catch (error) {
+        console.error("failed to initial color scheme listener", error);
+      }
+
+      return () => {
+        darkMediaQuery.removeEventListener("change", handleColorSchemeChange);
+      };
+    }
+  }, [mode]);
+
   return !loading ? (
     <>
       <DemoBanner />