feat: add dark mode

packages/trpc-panel/src/react-app/components/HeadersPopup.tsx

@@ -78,7 +78,7 @@ export function HeadersPopup() {
   }, [headersPopupShown]);
   if (!headersPopupShown) return null;
   return (
-    <div className="fixed flex left-0 right-0 top-0 bottom-0 items-center border border-panelBorder drop-shadow-lg justify-center bg-overlayBackground bg-opacity-70">
+    <div className="fixed flex left-0 right-0 top-0 bottom-0 items-center border border-panelBorder drop-shadow-lg justify-center bg-overlayBackground">
       <form
         onSubmit={(e) => {
           e.preventDefault();

packages/trpc-panel/src/react-app/components/ThemeSwitch.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function ThemeSwitch() {
+  const handleToggleTheme = () => {
+    const anyWindow = window as any;
+    const isDarkModeEnabled = anyWindow.isDarkModeEnabled();
+
+    if (isDarkModeEnabled) {
+      anyWindow.disableDarkMode()
+    } else {
+      anyWindow.enableDarkMode()
+    }
+  }
+
+  return (
+    <button
+      onClick={handleToggleTheme}
+      type="button"
+      className="border border-neutralSolidTransparent py-2 px-4 text-neutralText font-bold rounded-sm shadow-sm"
+    >
+      Change theme 🌓
+    </button>
+  );
+}

packages/trpc-panel/src/react-app/components/TopBar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useHeadersContext } from "@src/react-app/components/contexts/HeadersContext";
 import MailLockIcon from "@mui/icons-material/MailLockOutlined";
 import { LogoSvg } from "@src/react-app/components/LogoSvg";
+import { ThemeSwitch } from "@src/react-app/components/ThemeSwitch";
 import { useIsMac } from "@src/react-app/components/hooks/useIsMac";
 import Search from "@mui/icons-material/Search";
 import { useSearch } from "@src/react-app/components/contexts/SearchStore";
@@ -15,13 +16,16 @@ export function TopBar() {
         tRPC.panel()
       </span>
       <RouterSearchTooltip />
-      <button
-        onClick={() => setHeadersPopupShown(true)}
-        className="border border-neutralSolidTransparent py-2 px-4 text-neutralText font-bold rounded-sm shadow-sm"
-      >
-        Headers
-        <MailLockIcon className="w-6 h-6 ml-1" />
-      </button>
+      <div className="flex justify-end items-stretch space-x-2">
+        <ThemeSwitch />
+        <button
+          onClick={() => setHeadersPopupShown(true)}
+          className="border border-neutralSolidTransparent py-2 px-4 text-neutralText font-bold rounded-sm shadow-sm"
+        >
+          Headers
+          <MailLockIcon className="w-6 h-6 ml-1" />
+        </button>
+      </div>
     </div>
   );
 }

packages/trpc-panel/src/react-app/components/icons/ChevronIcon.tsx

@@ -1,31 +1,10 @@
 import React from "react";
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+
 export function ChevronIcon({ className }: { className: string }) {
     return (
-        <svg
-            height="45.999px"
-            id="Capa_1"
-            version="1.1"
-            viewBox="0 0 26.002 45.999"
-            width="26.002px"
-            xmlns="http://www.w3.org/2000/svg"
-            className={className}
-        >
-            <path d="M24.998,40.094c1.338,1.352,1.338,3.541,0,4.893c-1.338,1.35-3.506,1.352-4.846,0L1.004,25.447  c-1.338-1.352-1.338-3.543,0-4.895L20.152,1.014c1.34-1.352,3.506-1.352,4.846,0c1.338,1.352,1.338,3.541,0,4.893L9.295,23  L24.998,40.094z" />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-            <g />
-        </svg>
+        <span className={`w-[26.002px] flex items-center justify-center ${className ?? ''}`}>
+            <ChevronLeftIcon />
+        </span>
     );
 }

packages/trpc-panel/src/react-app/index.html

@@ -12,5 +12,28 @@
     </noscript>
     <div class="flex flex-1 w-full h-full" id="root"></div>
     {{js}}
+
+    <!-- Dark mode plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/darkreader.min.js"></script>
+    <script>
+        DarkReader.setFetchMethod(window.fetch)
+        DarkReader.auto(false);
+
+        function enableDarkMode() {
+            DarkReader.enable({
+                brightness: 150,
+                contrast: 130,
+            });
+        }
+
+        function disableDarkMode() {
+            DarkReader.disable();
+        }
+
+        function isDarkModeEnabled() {
+            return DarkReader.isEnabled();
+        }
+    </script>
+    <!-- End of dark mode plugin -->
 </body>
 </html>