From edbcb2eedb14c60d92167ac5d674672ed6d28325 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 15 Feb 2026 08:23:00 +0000
Subject: [PATCH] Make query builder results dark-mode responsive

Replace hardcoded light-mode colors (#eeeeee80 inline styles, bg-white,
bg-gray-* Tailwind classes) with dark: variant counterparts so the query
builder table, kanban, and results views adapt to Roam's dark mode.

Also fix the Roam app's Tailwind config to use .bp3-dark as the dark mode
class selector, since Roam applies bp3-dark (not .dark) in dark mode.

https://claude.ai/code/session_0132ew9iSyEjodJGd9vsWqb5
---
 .../src/components/results-view/Kanban.tsx    | 20 ++++++----------
 .../components/results-view/ResultsTable.tsx  |  2 +-
 .../components/results-view/ResultsView.tsx   | 23 ++++++-------------
 apps/roam/src/styles/styles.css               | 19 +++++++++++++++
 apps/roam/tailwind.config.ts                  |  3 ++-
 5 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/apps/roam/src/components/results-view/Kanban.tsx b/apps/roam/src/components/results-view/Kanban.tsx
index 88c8f25d1..d072f2297 100644
--- a/apps/roam/src/components/results-view/Kanban.tsx
+++ b/apps/roam/src/components/results-view/Kanban.tsx
@@ -137,8 +137,8 @@ const KanbanCard = (card: {
           hidden={!isDragHandle}
         />
         <div
-          className={`mb-3 rounded-xl bg-white p-4 ${
-            isDragHandle ? "" : "cursor-pointer hover:bg-gray-200"
+          className={`mb-3 rounded-xl bg-white dark:bg-gray-800 p-4 ${
+            isDragHandle ? "" : "cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
           }`}
         >
           <div className="card-display-value">
@@ -609,17 +609,12 @@ const Kanban = ({
           width: PSEUDO_CARD_WIDTH,
         }}
       >
-        <div className="mb-3 cursor-move rounded-xl bg-white p-4 shadow-lg">
-          <div className="font-semibold text-gray-800">Card</div>
+        <div className="mb-3 cursor-move rounded-xl bg-white dark:bg-gray-800 p-4 shadow-lg">
+          <div className="font-semibold text-gray-800 dark:text-gray-200">Card</div>
         </div>
       </div>
       {showLegend === "Yes" && (
-        <div
-          className="w-full p-4"
-          style={{
-            background: "#eeeeee80",
-          }}
-        >
+        <div className="w-full p-4 bg-gray-200/50 dark:bg-gray-700/50">
           <div className="mr-4 inline-block">
             <span className="font-bold">Group By:</span>
             <span> {columnKey}</span>
@@ -642,7 +637,7 @@ const Kanban = ({
             return (
               <div
                 key={col}
-                className="flex-shrink-1 roamjs-kanban-column flex max-w-2xl flex-col gap-2 rounded-2xl bg-gray-100 p-4"
+                className="flex-shrink-1 roamjs-kanban-column flex max-w-2xl flex-col gap-2 rounded-2xl bg-gray-100 dark:bg-gray-800 p-4"
                 data-column={col}
                 style={{ minWidth: "24rem" }}
               >
@@ -744,8 +739,7 @@ const Kanban = ({
         </div>
       </div>
       <div
-        className={`p-0 ${!showInterface ? "hidden" : ""}`}
-        style={{ background: "#eeeeee80" }}
+        className={`p-0 bg-gray-200/50 dark:bg-gray-700/50 ${!showInterface ? "hidden" : ""}`}
       >
         <div
           className="flex items-center gap-4"
diff --git a/apps/roam/src/components/results-view/ResultsTable.tsx b/apps/roam/src/components/results-view/ResultsTable.tsx
index 3dba01e10..aba24cf90 100644
--- a/apps/roam/src/components/results-view/ResultsTable.tsx
+++ b/apps/roam/src/components/results-view/ResultsTable.tsx
@@ -789,7 +789,7 @@ const ResultsTable = ({
       data-parent-uid={parentUid}
       {...tableProps}
     >
-      <thead style={{ background: "#eeeeee80" }}>
+      <thead className="bg-gray-200/50 dark:bg-gray-700/50">
         <tr style={{ visibility: !showInterface ? "collapse" : "visible" }}>
           {visibleColumns.map((c) => (
             <ResultHeader
diff --git a/apps/roam/src/components/results-view/ResultsView.tsx b/apps/roam/src/components/results-view/ResultsView.tsx
index dc2c9c091..a00dc5f47 100644
--- a/apps/roam/src/components/results-view/ResultsView.tsx
+++ b/apps/roam/src/components/results-view/ResultsView.tsx
@@ -516,12 +516,7 @@ const ResultsView: ResultsViewComponent = ({
       )}
 
       {showSearchFilter && (
-        <div
-          className="w-full p-4"
-          style={{
-            background: "#eeeeee80",
-          }}
-        >
+        <div className="w-full p-4 bg-gray-200/50 dark:bg-gray-700/50">
           <InputGroup
             fill={true}
             placeholder="Search"
@@ -1035,22 +1030,22 @@ const ResultsView: ResultsViewComponent = ({
                     text="Column Views"
                   />
                   <HTMLTable className="min-w-full">
-                    <thead className="bg-gray-50">
+                    <thead className="bg-gray-50 dark:bg-gray-800">
                       <tr>
-                        <th className="text-xs font-medium uppercase tracking-wider !text-gray-500">
+                        <th className="text-xs font-medium uppercase tracking-wider !text-gray-500 dark:!text-gray-400">
                           Column
                         </th>
-                        <th className="text-xs font-medium uppercase tracking-wider !text-gray-500">
+                        <th className="text-xs font-medium uppercase tracking-wider !text-gray-500 dark:!text-gray-400">
                           View
                         </th>
                         {showColumnViewOptions && (
-                          <th className="text-xs font-medium uppercase tracking-wider !text-gray-500">
+                          <th className="text-xs font-medium uppercase tracking-wider !text-gray-500 dark:!text-gray-400">
                             Options
                           </th>
                         )}
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200 bg-white">
+                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900">
                       {views.map(({ column, mode, value }, i) => (
                         <tr key={i}>
                           <td className="whitespace-nowrap">{column}</td>
@@ -1414,11 +1409,7 @@ const ResultsView: ResultsViewComponent = ({
               </div>
             )}
             <div
-              style={
-                !showInterface
-                  ? { display: "none" }
-                  : { background: "#eeeeee80" }
-              }
+              className={`bg-gray-200/50 dark:bg-gray-700/50 ${!showInterface ? "hidden" : ""}`}
             >
               <div
                 className="flex items-center justify-between px-1 text-xs"
diff --git a/apps/roam/src/styles/styles.css b/apps/roam/src/styles/styles.css
index 4d523185d..f7c1b1399 100644
--- a/apps/roam/src/styles/styles.css
+++ b/apps/roam/src/styles/styles.css
@@ -160,4 +160,23 @@
 
 .fuzzy-select-input-popover .bp3-popover-target {
   width: 100%;
+}
+
+/* Dark mode overrides for query builder */
+.bp3-dark .roamjs-query-hightlighted-result {
+  background: #b8860b;
+}
+
+.bp3-dark .roamjs-query-results-view ul::-webkit-scrollbar-thumb {
+  background: #555;
+}
+
+.bp3-dark .roamjs-extra-row td {
+  background-color: #30404d;
+}
+
+.bp3-dark .sidebar-title-button:hover,
+.bp3-dark .sidebar-title-button-add:hover {
+  background-color: #f5f8fa;
+  color: #10161a;
 }
\ No newline at end of file
diff --git a/apps/roam/tailwind.config.ts b/apps/roam/tailwind.config.ts
index f94c98ce6..e9a667011 100644
--- a/apps/roam/tailwind.config.ts
+++ b/apps/roam/tailwind.config.ts
@@ -3,9 +3,10 @@
 import type { Config } from "tailwindcss";
 import sharedConfig from "@repo/tailwind-config";
 
-const config: Pick<Config, "content" | "presets"> = {
+const config: Pick<Config, "content" | "presets" | "darkMode"> = {
   content: [],
   presets: [sharedConfig],
+  darkMode: ["class", ".bp3-dark"],
 };
 
 export default config;