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) =>
{displayValue(queryResults.rows[rowIdx][colIdx])}
|
@@ -70,7 +75,7 @@ function App() {
if (typeof v === 'string') {
return v
} else {
- return {JSON.stringify(v)}
+ return {JSON.stringify(v)}
}
}
@@ -134,7 +139,6 @@ function App() {
@@ -204,7 +210,7 @@ function App() {
: null}
{queryResults ? (queryResults.rows && queryResults.headers ?
{queryResults.headers.map((n, idx) => {
+ // 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',