Merge pull request #449 from balajmarius/main

Improve color contrast and readability in dark mode

Author: olaservo

client/src/App.tsx

@@ -611,7 +611,7 @@ const App = () => {
               className="w-full p-4"
               onValueChange={(value) => (window.location.hash = value)}
             >
-              <TabsList className="mb-4 p-0">
+              <TabsList className="mb-4 py-0">
                 <TabsTrigger
                   value="resources"
                   disabled={!serverCapabilities?.resources}
@@ -662,7 +662,7 @@ const App = () => {
                 !serverCapabilities?.tools ? (
                   <>
                     <div className="flex items-center justify-center p-4">
-                      <p className="text-lg text-gray-500">
+                      <p className="text-lg text-gray-500 dark:text-gray-400">
                         The connected server does not support any MCP
                         capabilities
                       </p>
@@ -816,7 +816,7 @@ const App = () => {
             </Tabs>
           ) : (
             <div className="flex flex-col items-center justify-center h-full gap-4">
-              <p className="text-lg text-gray-500">
+              <p className="text-lg text-gray-500 dark:text-gray-400">
                 Connect to an MCP server to start inspecting
               </p>
               <div className="flex items-center gap-2">
@@ -841,7 +841,7 @@ const App = () => {
           }}
         >
           <div
-            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
+            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50 dark:hover:bg-input/40"
             onMouseDown={handleDragStart}
           >
             <div className="w-8 h-1 rounded-full bg-border" />

client/src/components/History.tsx

@@ -29,7 +29,9 @@ const HistoryAndNotifications = ({
       <div className="flex-1 overflow-y-auto p-4 border-r">
         <h2 className="text-lg font-semibold mb-4">History</h2>
         {requestHistory.length === 0 ? (
-          <p className="text-sm text-gray-500 italic">No history yet</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+            No history yet
+          </p>
         ) : (
           <ul className="space-y-3">
             {requestHistory
@@ -38,7 +40,7 @@ const HistoryAndNotifications = ({
               .map((request, index) => (
                 <li
                   key={index}
-                  className="text-sm text-foreground bg-secondary p-2 rounded"
+                  className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"
@@ -93,7 +95,9 @@ const HistoryAndNotifications = ({
       <div className="flex-1 overflow-y-auto p-4">
         <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
         {serverNotifications.length === 0 ? (
-          <p className="text-sm text-gray-500 italic">No notifications yet</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+            No notifications yet
+          </p>
         ) : (
           <ul className="space-y-3">
             {serverNotifications
@@ -102,7 +106,7 @@ const HistoryAndNotifications = ({
               .map((notification, index) => (
                 <li
                   key={index}
-                  className="text-sm text-foreground bg-secondary p-2 rounded"
+                  className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"

client/src/components/ListPane.tsx

@@ -21,8 +21,8 @@ const ListPane = <T extends object>({
   buttonText,
   isButtonDisabled,
 }: ListPaneProps<T>) => (
-  <div className="bg-card rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+  <div className="bg-card border border-border rounded-lg shadow">
+    <div className="p-4 border-b border-gray-200 dark:border-border">
       <h3 className="font-semibold dark:text-white">{title}</h3>
     </div>
     <div className="p-4">
@@ -46,7 +46,7 @@ const ListPane = <T extends object>({
         {items.map((item, index) => (
           <div
             key={index}
-            className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+            className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
             onClick={() => setSelectedItem(item)}
           >
             {renderItem(item)}

client/src/components/PromptsTab.tsx

@@ -110,8 +110,8 @@ const PromptsTab = ({
           isButtonDisabled={!nextCursor && prompts.length > 0}
         />
 
-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+        <div className="bg-card border border-border rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 dark:border-border">
             <h3 className="font-semibold">
               {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
             </h3>
@@ -126,7 +126,7 @@ const PromptsTab = ({
             ) : selectedPrompt ? (
               <div className="space-y-4">
                 {selectedPrompt.description && (
-                  <p className="text-sm text-gray-600">
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
                     {selectedPrompt.description}
                   </p>
                 )}

client/src/components/ResourcesTab.tsx

@@ -173,8 +173,8 @@ const ResourcesTab = ({
           isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
         />
 
-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
+        <div className="bg-card border border-border rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 dark:border-border flex justify-between items-center">
             <h3
               className="font-semibold truncate"
               title={selectedResource?.name || selectedTemplate?.name}
@@ -234,7 +234,7 @@ const ResourcesTab = ({
               />
             ) : selectedTemplate ? (
               <div className="space-y-4">
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-gray-600 dark:text-gray-400">
                   {selectedTemplate.description}
                 </p>
                 {selectedTemplate.uriTemplate

client/src/components/Sidebar.tsx

@@ -215,7 +215,7 @@ const Sidebar = ({
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
-      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-border">
         <div className="flex items-center">
           <h1 className="ml-2 text-lg font-semibold">
             MCP Inspector v{version}
@@ -646,7 +646,7 @@ const Sidebar = ({
                   }
                 })()}`}
               />
-              <span className="text-sm text-gray-600">
+              <span className="text-sm text-gray-600 dark:text-gray-400">
                 {(() => {
                   switch (connectionStatus) {
                     case "connected":

client/src/components/ToolsTab.tsx

@@ -77,16 +77,16 @@ const ToolsTab = ({
           isButtonDisabled={!nextCursor && tools.length > 0}
         />
 
-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+        <div className="bg-card border border-border rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 dark:border-border">
             <h3 className="font-semibold">
               {selectedTool ? selectedTool.name : "Select a tool"}
             </h3>
           </div>
           <div className="p-4">
             {selectedTool ? (
               <div className="space-y-4">
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-gray-600 dark:text-gray-400">
                   {selectedTool.description}
                 </p>
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
@@ -96,7 +96,7 @@ const ToolsTab = ({
                       <div key={key}>
                         <Label
                           htmlFor={key}
-                          className="block text-sm font-medium text-gray-700"
+                          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
                         >
                           {key}
                         </Label>

client/src/index.css

@@ -93,8 +93,8 @@ h1 {
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --border: 217.2 24% 24%;
+    --input: 217.2 24% 24%;
     --ring: 212.7 26.8% 83.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;