detect the current UI theme on table load and update it when the system theme changes

Author: ghazi-git

src/devtools/App.tsx

@@ -4,26 +4,23 @@ import MainContent from "@/devtools/components/main-content/MainContent";
 import { OriginContextProvider } from "@/devtools/components/origin-context";
 import Sidebar from "@/devtools/components/sidebar/Sidebar";
 import { SidebarContextProvider } from "@/devtools/components/sidebar/sidebar-context";
-import { ThemeContextProvider } from "@/devtools/utils/ui-theme-context";
 
 import styles from "./App.module.css";
 
 function App() {
   return (
-    <ThemeContextProvider>
-      <div class={styles.app}>
-        <OriginContextProvider>
-          <IndexedDBContextProvider>
-            <ActiveObjectStoreContextProvider>
-              <SidebarContextProvider>
-                <Sidebar />
-                <MainContent />
-              </SidebarContextProvider>
-            </ActiveObjectStoreContextProvider>
-          </IndexedDBContextProvider>
-        </OriginContextProvider>
-      </div>
-    </ThemeContextProvider>
+    <div class={styles.app}>
+      <OriginContextProvider>
+        <IndexedDBContextProvider>
+          <ActiveObjectStoreContextProvider>
+            <SidebarContextProvider>
+              <Sidebar />
+              <MainContent />
+            </SidebarContextProvider>
+          </ActiveObjectStoreContextProvider>
+        </IndexedDBContextProvider>
+      </OriginContextProvider>
+    </div>
   );
 }
 

src/devtools/components/main-content/object-store-view/Table.tsx

@@ -10,7 +10,14 @@ import {
   SizeColumnsToContentStrategy,
   SizeColumnsToFitGridStrategy,
 } from "ag-grid-community";
-import { batch, createEffect, onCleanup, onMount, untrack } from "solid-js";
+import {
+  batch,
+  createEffect,
+  createSignal,
+  onCleanup,
+  onMount,
+  untrack,
+} from "solid-js";
 import { unwrap } from "solid-js/store";
 
 import { useTableContext } from "@/devtools/components/main-content/object-store-view/table-context";
@@ -47,12 +54,11 @@ import {
   TableColumn,
   TableRow,
 } from "@/devtools/utils/types";
-import { useTheme } from "@/devtools/utils/ui-theme-context";
 
 import styles from "./Table.module.css";
 
 export default function Table(props: TableProps) {
-  const { theme } = useTheme();
+  const theme = createThemeSignal();
   let gridApi: GridApi;
   let tableContainer: HTMLDivElement;
 
@@ -322,6 +328,27 @@ export default function Table(props: TableProps) {
   );
 }
 
+function createThemeSignal() {
+  const darkThemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const [theme, setTheme] = createSignal<"light" | "dark">(
+    darkThemeQuery.matches ? "dark" : "light",
+  );
+
+  const onChange = (event: MediaQueryListEvent) => {
+    const systemTheme = event.matches ? "dark" : "light";
+    console.log("systemTheme", systemTheme);
+    setTheme(systemTheme);
+  };
+  onMount(() => {
+    darkThemeQuery.addEventListener("change", onChange);
+  });
+  onCleanup(() => {
+    darkThemeQuery.removeEventListener("change", onChange);
+  });
+
+  return theme;
+}
+
 interface TableProps {
   columns: TableColumn[];
   rows: TableRow[];