diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts
index 96d3c0e72..98bc82d81 100644
--- a/apps/client/src/widgets/view_widgets/table_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/index.ts
@@ -1,11 +1,11 @@
 import froca from "../../../services/froca.js";
 import ViewMode, { type ViewModeArgs } from "../view_mode.js";
-import { createGrid, AllCommunityModule, ModuleRegistry, GridOptions } from "ag-grid-community";
+import { createGrid, AllCommunityModule, ModuleRegistry, GridOptions, themeQuartz, colorSchemeDark } from "ag-grid-community";
 import attributes, { setLabel } from "../../../services/attributes.js";
 import getPromotedAttributeInformation, { buildColumnDefinitions, buildData, TableData } from "./data.js";
 import applyHeaderCustomization from "./header-customization.js";
 import server from "../../../services/server.js";
-import type { GridApi, GridState } from "ag-grid-community";
+import type { GridApi, GridState, Theme } from "ag-grid-community";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import branches from "../../../services/branches.js";
 import type { CommandListenerData, EventData } from "../../../components/app_context.js";
@@ -86,6 +86,7 @@ export default class TableView extends ViewMode<StateInfo> {
             ...this.setupEditing(),
             ...this.setupDragging(),
             initialState,
+            theme: this.getTheme(),
             async onGridReady(event) {
                 applyHeaderCustomization(el, event.api);
             },
@@ -191,6 +192,14 @@ export default class TableView extends ViewMode<StateInfo> {
         console.log("Save attributes", this.newAttribute);
     }
 
+    private getTheme(): Theme {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return themeQuartz.withPart(colorSchemeDark)
+        } else {
+            return themeQuartz;
+        }
+    }
+
     onEntitiesReloaded({ loadResults }: EventData<"entitiesReloaded">): boolean | void {
         // Refresh if promoted attributes get changed.
         if (loadResults.getAttributeRows().find(attr =>