refactor: support dark mode

gpgui/src/App.css

@@ -2,9 +2,9 @@ html {
     height: 100%;
     -webkit-user-select: none;
     user-select: none;
+    cursor: default;
 }
 
 body {
     height: 100%;
-    background: #f6f6f6 !important;
 }

gpgui/src/main.tsx

@@ -1,11 +1,35 @@
-import { CssBaseline } from '@mui/material'
+import {
-import React from 'react'
+  CssBaseline,
-import ReactDOM from 'react-dom/client'
+  ThemeProvider,
-import App from './App'
+  createTheme,
+  useMediaQuery,
+} from "@mui/material";
+import React, { useMemo } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+function Root() {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? "dark" : "light",
+        },
+      }),
+    [prefersDarkMode]
+  );
+
+  return (
     <React.StrictMode>
+      <ThemeProvider theme={theme}>
         <CssBaseline />
         <App />
-  </React.StrictMode>,
+      </ThemeProvider>
-)
+    </React.StrictMode>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <Root />
+);