Merge pull request #69 from modelcontextprotocol/ashwin/darkmode

dark mode fixes

Author: ashwin-ant

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);

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)}

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 ? (

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:

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;