Preliminary fixes for dark mode rendering (#39)

Author: j6k4m8

motifstudio-web/src/app/Appbar.tsx

@@ -3,8 +3,13 @@ import Image from "next/image";
 export function Appbar() {
     return (
         <div className="w-full items-center justify-between font-mono text-sm lg:flex p-4">
-            <div className="flex flex-col justify-center w-full h-full p-4 bg-white rounded-lg shadow-lg">
-                <Image src={motifStudioLogo} alt="Motif Studio" className="object-contain h-8 object-left" />
+            <div className="flex flex-col justify-center w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
+                <Image
+                    src={motifStudioLogo}
+                    alt="Motif Studio"
+                    // In dark mode, invert the logo colors. (Check theme with tailwind)
+                    className="object-contain h-8 object-left w-auto dark:filter dark:invert"
+                />
             </div>
         </div>
     );

motifstudio-web/src/app/GraphForm.tsx

@@ -40,7 +40,7 @@ export function GraphForm({
 
     // Return the dropdown with the filtered graphs as the options.
     return (
-        <div className="h-full bg-white p-4 rounded-lg shadow-lg">
+        <div className="h-full bg-white p-4 rounded-lg shadow-lg dark:bg-gray-800">
             <h2 className="text-xl font-mono">Host Graph</h2>
             <hr className="my-2" />
 
@@ -60,19 +60,22 @@ export function GraphForm({
                         <div className="relative">
                             <Combobox.Input
                                 onChange={(event) => setQuery(event.target.value)}
-                                className="w-full p-4 rounded-lg shadow-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent font-bold"
+                                className="w-full p-4 rounded-lg shadow-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent font-bold dark:bg-gray-900 dark:text-gray-200"
                                 placeholder="Start typing or press the down arrow to choose a host graph..."
                                 displayValue={(graph: HostListing) => graph?.name}
                             />
-                            <Combobox.Options className="p-3 rounded-lg shadow-lg border border-gray-200 z-10 bg-white overflow-y-scroll max-h-64 absolute w-full">
+                            <Combobox.Options className="p-3 rounded-lg shadow-lg border overflow-y-scroll max-h-64 absolute w-full">
                                 {filteredGraphs.map((graph) => (
                                     <Combobox.Option
                                         key={graph.id}
                                         value={graph}
                                         className={({ active }) => `${
-                                            active ? "text-white bg-blue-400" : "text-gray-900"
+                                            active
+                                                ? "text-white bg-blue-400 dark:bg-blue-400 dark:text-white"
+                                                : "text-gray-900 dark:text-gray-200"
                                         }
-                                        cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-blue-400 hover:text-white flex items-center justify-between`}
+                                        cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-blue-400 hover:text-white flex items-center justify-between text-sm
+                                        `}
                                     >
                                         <b className="font-bold">{graph.name}</b>{" "}
                                         <div className="text-xs inline font-mono ml-4">{graph.id}</div>

motifstudio-web/src/app/GraphStats.tsx

@@ -101,7 +101,7 @@ export function GraphStats({
 
     // Render the attributes and statistics.
     return graph ? (
-        <div className="flex w-full h-full p-4 bg-white rounded-lg shadow-lg">
+        <div className="flex w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
             <div className="flex flex-col gap-2 w-full">
                 <h2 className="text-xl font-mono w-full">Graph Properties for {graph.name}</h2>
                 <hr className="my-2 w-full" />

motifstudio-web/src/app/ResultsFetcher.tsx

@@ -121,13 +121,13 @@ export function ResultsFetcher({ graph, query }: { graph: HostListing | null; qu
                 </div>
                 <div className="w-full flex gap-2">
                     <button
-                        className="bg-blue-500  hover:bg-blue-700 text-white font-bold px-4 rounded"
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
                         onClick={() => downloadResults("json")}
                     >
                         JSON
                     </button>
                     <button
-                        className="bg-blue-500  hover:bg-blue-700 text-white font-bold px-4 rounded"
+                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
                         onClick={() => downloadResults("csv")}
                     >
                         CSV
@@ -153,7 +153,7 @@ export function ResultsFetcher({ graph, query }: { graph: HostListing | null; qu
                     <tbody className="border-b-2">
                         {queryData?.motif_results?.length ? (
                             queryData.motif_results.slice(0, 10000).map((result: any, i: number) => (
-                                <tr key={i} className="border-b-2 hover:bg-gray-100">
+                                <tr key={i} className="border-b-2 hover:bg-gray-100 dark:hover:bg-gray-700">
                                     <a
                                         href={neuroglancerUrlFromHostVolumetricData(
                                             queryData?.host_volumetric_data?.uri,

motifstudio-web/src/app/ResultsWrapper.tsx

@@ -13,7 +13,7 @@ export function ResultsWrapper({ graph, query }: { graph: HostListing | null; qu
     }, [graph, query]);
 
     return (
-        <div className="flex flex-col gap-2 w-full h-full p-4 bg-white rounded-lg shadow-lg">
+        <div className="flex flex-col gap-2 w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
             {!trigger ? (
                 <button
                     className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"

motifstudio-web/src/app/WrappedEditor.tsx

@@ -62,6 +62,28 @@ export function WrappedEditor({
                 "editor.foreground": "#888888",
             },
         });
+        monaco.editor.defineTheme("motiftheme-dark", {
+            base: "vs-dark",
+            inherit: false,
+            rules: [
+                {
+                    token: "operator",
+                    foreground: "ff0000",
+                    fontStyle: "bold",
+                },
+                {
+                    token: "edge",
+                    foreground: "0066dd",
+                    fontStyle: "bold",
+                },
+                { token: "entity", foreground: "008800" },
+                { token: "macro", foreground: "888800" },
+            ],
+            colors: {
+                "editor.foreground": "#888888",
+                "editor.background": "#1f2937",
+            },
+        });
 
         // Set of variable entity names that can be auto-completed:
         // const variableEntityNames = ["A", "B"];
@@ -81,7 +103,7 @@ export function WrappedEditor({
     return (
         <Editor
             height="40vh"
-            theme="motiftheme"
+            theme={window.matchMedia("(prefers-color-scheme: dark)").matches ? "motiftheme-dark" : "motiftheme"}
             beforeMount={handleEditorWillMount}
             onChange={(value, event) => {
                 if (onChange) {