From 04f1400db19d27798f933b1a820c65a7096c60f4 Mon Sep 17 00:00:00 2001
From: Chuanqi <chuanqi.sun.dev@gmail.com>
Date: Thu, 4 May 2023 21:24:22 -0700
Subject: [PATCH 1/3] disable spellcheck on wasm-demo code editor

---
 cozo-lib-wasm/wasm-react-demo/src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cozo-lib-wasm/wasm-react-demo/src/App.js b/cozo-lib-wasm/wasm-react-demo/src/App.js
index beac48e8..abea583e 100644
--- a/cozo-lib-wasm/wasm-react-demo/src/App.js
+++ b/cozo-lib-wasm/wasm-react-demo/src/App.js
@@ -134,6 +134,7 @@ function App() {
                 <div style={{display: 'flex'}}>
                     <TextArea
                         autoFocus
+                        spellCheck="false"
                         placeholder="Type query, SHIFT + Enter to run"
                         id="query-box"
                         className="bp4-fill"

From c452694e182468f6b5d7a6a9d1db7386bd0f7f17 Mon Sep 17 00:00:00 2001
From: Chuanqi <chuanqi.sun.dev@gmail.com>
Date: Thu, 4 May 2023 22:38:44 -0700
Subject: [PATCH 2/3] support browser/OS default color scheme

---
 cozo-lib-wasm/wasm-react-demo/src/App.js      | 24 +++++++++-----
 .../src/hooks/use-color-scheme.js             | 33 +++++++++++++++++++
 cozo-lib-wasm/wasm-react-demo/src/index.css   |  4 +++
 3 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js

diff --git a/cozo-lib-wasm/wasm-react-demo/src/App.js b/cozo-lib-wasm/wasm-react-demo/src/App.js
index abea583e..9b7a9158 100644
--- a/cozo-lib-wasm/wasm-react-demo/src/App.js
+++ b/cozo-lib-wasm/wasm-react-demo/src/App.js
@@ -6,11 +6,11 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import './App.css';
 import {
     Button,
     Checkbox,
     Classes,
+    Colors,
     Dialog,
     FileInput,
     InputGroup,
@@ -19,11 +19,13 @@ import {
     TextArea,
     Toaster
 } from "@blueprintjs/core";
-import {Cell, Column, Table2} from "@blueprintjs/table";
-import React, {useEffect, useState} from "react";
-import init, {CozoDb} from "cozo-lib-wasm";
-import {parse} from "ansicolor";
-import {saveAs} from 'file-saver';
+import { Cell, Column, Table2 } from "@blueprintjs/table";
+import { parse } from "ansicolor";
+import init, { CozoDb } from "cozo-lib-wasm";
+import { saveAs } from 'file-saver';
+import React, { useEffect, useState } from "react";
+import './App.css';
+import { useBlueprintThemeClassName, usePreferredColorScheme } from './hooks/use-color-scheme';
 
 
 function App() {
@@ -44,6 +46,9 @@ function App() {
         })
     }, []);
 
+    const colorScheme = usePreferredColorScheme();
+    useBlueprintThemeClassName(colorScheme);
+
     const renderCell = (colIdx) => (rowIdx) => <Cell>
         {displayValue(queryResults.rows[rowIdx][colIdx])}
     </Cell>
@@ -70,7 +75,7 @@ function App() {
         if (typeof v === 'string') {
             return v
         } else {
-            return <span style={{color: "#184A90"}}>{JSON.stringify(v)}</span>
+            return <span style={{color: colorScheme === "light" ? Colors.BLUE2 : Colors.BLUE5}}>{JSON.stringify(v)}</span>
         }
     }
 
@@ -134,7 +139,6 @@ function App() {
                 <div style={{display: 'flex'}}>
                     <TextArea
                         autoFocus
-                        spellCheck="false"
                         placeholder="Type query, SHIFT + Enter to run"
                         id="query-box"
                         className="bp4-fill"
@@ -143,6 +147,7 @@ function App() {
                         intent={Intent.PRIMARY}
                         onChange={e => setQueryText(e.target.value)}
                         onKeyDown={handleKeyDown}
+                        spellCheck="false"
                         value={queryText}
                     />
                     {showParams && <TextArea
@@ -152,6 +157,7 @@ function App() {
                         large={true}
                         onChange={e => setParams(e.target.value)}
                         onKeyDown={handleKeyDown}
+                        spellCheck="false"
                         value={params}
                     />}
                 </div>
@@ -204,7 +210,7 @@ function App() {
             </pre> : null}
             {queryResults ? (queryResults.rows && queryResults.headers ?
                 <Table2
-                    cellRendererDependencies={queryResults.rows}
+                    cellRendererDependencies={[renderCell, ...queryResults.rows]}
                     numRows={queryResults.rows.length}
                 >
                     {queryResults.headers.map((n, idx) => <Column
diff --git a/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js b/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js
new file mode 100644
index 00000000..1cc14eac
--- /dev/null
+++ b/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Detect user preferred color scheme based on OS/browser settings
+ * @returns {'light' | 'dark'}
+ */
+export function usePreferredColorScheme() {
+  const [colorScheme, setColorScheme] = useState("light");
+
+  useEffect(() => {
+    // reference: https://blueprintjs.com/docs/#core/typography.dark-theme
+    const updateColorScheme = (mediaQueryOrEvent) => setColorScheme(mediaQueryOrEvent.matches ? "dark" : "light");
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    updateColorScheme(mediaQuery);
+
+    mediaQuery.addEventListener("change", updateColorScheme);
+    return () => mediaQuery.removeEventListener("change", updateColorScheme);
+  }, []);
+
+  return colorScheme;
+}
+
+/**
+ * Apply Blueprint design system's recommended theme class name to the body element
+ * @param {'light' | 'dark'} colorScheme
+ */
+export function useBlueprintThemeClassName(colorScheme) {
+  useEffect(() => {
+    // reference: https://blueprintjs.com/docs/#core/typography.dark-theme
+    document.body.classList[colorScheme === "dark" ? "add" : "remove"]("bp4-dark");
+  }, [colorScheme]);
+}
diff --git a/cozo-lib-wasm/wasm-react-demo/src/index.css b/cozo-lib-wasm/wasm-react-demo/src/index.css
index 9dc1c7ae..202967f2 100644
--- a/cozo-lib-wasm/wasm-react-demo/src/index.css
+++ b/cozo-lib-wasm/wasm-react-demo/src/index.css
@@ -6,6 +6,10 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+:root {
+  color-scheme: dark light;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

From ef1eaa15d9c27ca2b98d9d09b2589081665af825 Mon Sep 17 00:00:00 2001
From: Chuanqi <chuanqi.sun.dev@gmail.com>
Date: Thu, 4 May 2023 22:44:37 -0700
Subject: [PATCH 3/3] graceful fallback to light theme for older browsers

---
 cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js b/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js
index 1cc14eac..797bdecb 100644
--- a/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js
+++ b/cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js
@@ -11,7 +11,9 @@ export function usePreferredColorScheme() {
     // reference: https://blueprintjs.com/docs/#core/typography.dark-theme
     const updateColorScheme = (mediaQueryOrEvent) => setColorScheme(mediaQueryOrEvent.matches ? "dark" : "light");
 
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!mediaQuery) return;
+
     updateColorScheme(mediaQuery);
 
     mediaQuery.addEventListener("change", updateColorScheme);