From 78182eab10777b5c6856430403d1535708cc6d40 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Wed, 20 Nov 2024 11:25:06 -0800
Subject: [PATCH] dark mode fixes

---
 client/src/App.tsx                     |  7 +++----
 client/src/components/ListPane.tsx     |  6 +++---
 client/src/components/ResourcesTab.tsx |  2 +-
 client/src/components/ui/button.tsx    |  2 +-
 client/src/lib/useDarkModeSync.ts      | 29 ++++++++++++++++++++++++++
 package-lock.json                      |  8 +++----
 6 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 client/src/lib/useDarkModeSync.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5df8f4e14..5ac70843c 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -23,10 +23,6 @@ import {
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-// Add dark mode class based on system preference
-if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-  document.documentElement.classList.add("dark");
-}
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -52,6 +48,7 @@ import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
+import useDarkModeSync from "./lib/useDarkModeSync";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -138,6 +135,8 @@ const App = () => {
   const dragStartY = useRef<number>(0);
   const dragStartHeight = useRef<number>(0);
 
+  useDarkModeSync();
+
   const handleDragStart = useCallback(
     (e: React.MouseEvent) => {
       setIsDragging(true);
diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 731e470fb..5fca6a405 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -20,8 +20,8 @@ const ListPane = <T extends object>({
   isButtonDisabled,
 }: ListPaneProps<T>) => (
   <div className="bg-card rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200">
-      <h3 className="font-semibold">{title}</h3>
+    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 className="font-semibold dark:text-white">{title}</h3>
     </div>
     <div className="p-4">
       <Button
@@ -36,7 +36,7 @@ const ListPane = <T extends object>({
         {items.map((item, index) => (
           <div
             key={index}
-            className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+            className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
             onClick={() => setSelectedItem(item)}
           >
             {renderItem(item)}
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 041371bad..b1224f1ae 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -142,7 +142,7 @@ const ResourcesTab = ({
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           ) : selectedResource ? (
-            <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words">
+            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
               {resourceContent}
             </pre>
           ) : selectedTemplate ? (
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
index 225e1138e..084150efe 100644
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
diff --git a/client/src/lib/useDarkModeSync.ts b/client/src/lib/useDarkModeSync.ts
new file mode 100644
index 000000000..8d612b5e7
--- /dev/null
+++ b/client/src/lib/useDarkModeSync.ts
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+// Listen for changes to the user's preferred color scheme
+const useDarkModeSync = () => {
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const handleDarkModeChange = (e: MediaQueryListEvent) => {
+      if (e.matches) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+
+    if (darkModeMediaQuery.matches) {
+      document.documentElement.classList.add("dark");
+    }
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, []);
+};
+
+export default useDarkModeSync;
diff --git a/package-lock.json b/package-lock.json
index aadcba169..627367253 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@modelcontextprotocol/inspector",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@modelcontextprotocol/inspector",
-      "version": "0.1.4",
+      "version": "0.1.7",
       "license": "MIT",
       "workspaces": [
         "client",
@@ -27,7 +27,7 @@
     },
     "client": {
       "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.1.0",
+      "version": "0.1.7",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "0.5.0",
@@ -5867,7 +5867,7 @@
     },
     "server": {
       "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.1.0",
+      "version": "0.1.7",
       "license": "MIT",
       "dependencies": {
         "@modelcontextprotocol/sdk": "0.5.0",