Update

index.js

@@ -1,4 +1,4 @@
-const { h, watch, onUnmount } = window;
+import { h, watch, onUnmount } from "sigpro"
 
 import {
   ModuleRegistry,
@@ -10,11 +10,14 @@ import {
   TextEditorModule,
   ClientSideRowModelModule,
   themeQuartz,
-  iconSetQuartzLight,
-  createGrid
+  createGrid,
+  NumberFilterModule,
+  TextFilterModule,
+  DateFilterModule
 } from "ag-grid-community";
 import {
   MultiFilterModule,
+  SetFilterModule,
   CellSelectionModule,
   PivotModule,
   MasterDetailModule,
@@ -44,6 +47,10 @@ ModuleRegistry.registerModules([
   StatusBarModule,
   ExcelExportModule,
   ClipboardModule,
+  NumberFilterModule,
+  TextFilterModule,
+  SetFilterModule,
+  DateFilterModule
 ]);
 
 const Grid = (props) => {
@@ -55,9 +62,33 @@ const Grid = (props) => {
     dark !== undefined
       ? (typeof dark === 'function' ? dark() : dark)
       : document.documentElement.getAttribute('data-theme') === 'dark' ||
-        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-  const getTheme = () => getDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham';
+  const getTheme = () => {
+    const isDark = getDark();
+
+    if (isDark) {
+      return themeQuartz.withParams({
+        headerFontSize: 14,
+        headerVerticalPaddingScale: 0.4,
+        rowVerticalPaddingScale: 0.4,
+        backgroundColor: "#1d1d1d",
+        foregroundColor: "#ffffff",
+        headerBackgroundColor: "#2a2a2a",
+        headerForegroundColor: "#ffffff",
+        oddRowBackgroundColor: "#262626",
+        borderColor: "#404040",
+        browserColorScheme: "dark"
+      });
+    }
+
+    return themeQuartz.withParams({
+      browserColorScheme: "light",
+      headerFontSize: 14,
+      headerVerticalPaddingScale: 0.4,
+      rowVerticalPaddingScale: 0.4
+    });
+  };
 
   const initGrid = (container) => {
     if (cleanupFn) {
@@ -124,9 +155,10 @@ const Grid = (props) => {
     const stopTheme = watch(() => {
       if (!gridApi || gridApi.isDestroyed()) return;
       getDark();
-      const currentTheme = getTheme();
-      if (currentTheme !== gridApi.getGridOption("theme")) {
-        gridApi.setGridOption("theme", currentTheme);
+      const newTheme = getTheme();
+      const currentTheme = gridApi.getGridOption("theme");
+      if (JSON.stringify(newTheme) !== JSON.stringify(currentTheme)) {
+        gridApi.setGridOption("theme", newTheme);
       }
     });
 
@@ -137,7 +169,7 @@ const Grid = (props) => {
         Object.entries(newOptions).forEach(([key, val]) => {
           try {
             gridApi.setGridOption(key, val);
-          } catch (e) {}
+          } catch (e) { }
         });
       }
     });
@@ -168,5 +200,4 @@ const Grid = (props) => {
   });
 };
 
-if (typeof window !== 'undefined') window.Grid = Grid;
-export { Grid, createGrid, themeQuartz, iconSetQuartzLight, ModuleRegistry };
+export { Grid };