Merge pull request #50 from modelcontextprotocol/justin/fix-dark-mode

Marginally better dark mode support

Author: jspahrsummers

client/src/App.tsx

@@ -23,6 +23,10 @@ import {
   ClientNotification,
 } from "@modelcontextprotocol/sdk/types.js";
 import { 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 { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -348,13 +352,13 @@ const App = () => {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="flex h-screen bg-background">
       <Sidebar connectionStatus={connectionStatus} />
       <div className="flex-1 flex flex-col overflow-hidden">
         <h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
         <div className="flex-1 overflow-auto flex">
           <div className="flex-1">
-            <div className="p-4 bg-white shadow-md m-4 rounded-md">
+            <div className="p-4 bg-card shadow-md m-4 rounded-md">
               <h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2>
               <div className="flex space-x-2 mb-2">
                 <Select

client/src/components/History.tsx

@@ -29,7 +29,7 @@ const HistoryAndNotifications = ({
   };
 
   return (
-    <div className="w-64 bg-white shadow-md p-4 overflow-hidden flex flex-col h-full">
+    <div className="w-64 bg-card shadow-md p-4 overflow-hidden flex flex-col h-full">
       <div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
         <h2 className="text-lg font-semibold mb-4">History</h2>
         {requestHistory.length === 0 ? (
@@ -42,7 +42,7 @@ const HistoryAndNotifications = ({
               .map((request, index) => (
                 <li
                   key={index}
-                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                  className="text-sm text-foreground bg-secondary p-2 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"
@@ -74,7 +74,7 @@ const HistoryAndNotifications = ({
                             <Copy size={16} />
                           </button>
                         </div>
-                        <pre className="whitespace-pre-wrap break-words bg-blue-50 p-2 rounded">
+                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                           {JSON.stringify(JSON.parse(request.request), null, 2)}
                         </pre>
                       </div>
@@ -91,7 +91,7 @@ const HistoryAndNotifications = ({
                               <Copy size={16} />
                             </button>
                           </div>
-                          <pre className="whitespace-pre-wrap break-words bg-green-50 p-2 rounded">
+                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                             {JSON.stringify(
                               JSON.parse(request.response),
                               null,
@@ -119,7 +119,7 @@ const HistoryAndNotifications = ({
               .map((notification, index) => (
                 <li
                   key={index}
-                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                  className="text-sm text-foreground bg-secondary p-2 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"
@@ -146,7 +146,7 @@ const HistoryAndNotifications = ({
                           <Copy size={16} />
                         </button>
                       </div>
-                      <pre className="whitespace-pre-wrap break-words bg-purple-50 p-2 rounded">
+                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                         {JSON.stringify(notification, null, 2)}
                       </pre>
                     </div>

client/src/components/HistoryAndNotifications.tsx

@@ -19,7 +19,7 @@ const ListPane = <T extends object>({
   buttonText,
   isButtonDisabled,
 }: ListPaneProps<T>) => (
-  <div className="bg-white rounded-lg shadow">
+  <div className="bg-card rounded-lg shadow">
     <div className="p-4 border-b border-gray-200">
       <h3 className="font-semibold">{title}</h3>
     </div>

client/src/components/ListPane.tsx

@@ -70,7 +70,7 @@ const PromptsTab = ({
         isButtonDisabled={!nextCursor && prompts.length > 0}
       />
 
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-card rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">
           <h3 className="font-semibold">
             {selectedPrompt ? selectedPrompt.name : "Select a prompt"}

client/src/components/PromptsTab.tsx

@@ -111,7 +111,7 @@ const ResourcesTab = ({
         isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
       />
 
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-card rounded-lg shadow">
         <div className="p-4 border-b border-gray-200 flex justify-between items-center">
           <h3
             className="font-semibold truncate"

client/src/components/ResourcesTab.tsx

@@ -2,7 +2,7 @@ import { Menu, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
-  <div className="w-64 bg-white border-r border-gray-200">
+  <div className="w-64 bg-card border-r border-border">
     <div className="flex items-center p-4 border-b border-gray-200">
       <Menu className="w-6 h-6 text-gray-500" />
       <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>

client/src/components/Sidebar.tsx

@@ -96,7 +96,7 @@ const ToolsTab = ({
         isButtonDisabled={!nextCursor && tools.length > 0}
       />
 
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-card rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">
           <h3 className="font-semibold">
             {selectedTool ? selectedTool.name : "Select a tool"}