diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 26b0624f62..d6c9d06961 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -2018,14 +2018,14 @@ const columnAligns = computed<("left" | "right")[]>(() => {
 
 function gridCellTextColorClass(item: RowItem, actualColIdx: number, visibleColIdx: number): string {
   const value = item.data[actualColIdx];
-  const isMongoDocumentNull = props.mongoCollectionGrid === true && value === MONGO_DOCUMENT_GRID_NULL;
-  if (isMongoDocumentNull) return "text-muted-foreground italic";
+  const isGridNull = value === null || (props.mongoCollectionGrid === true && value === MONGO_DOCUMENT_GRID_NULL);
+  if (isGridNull) return "text-muted-foreground italic";
   if (!colorizeDataGridCellTypes.value) return "text-foreground";
   const checkbox = booleanCellsUseCheckbox.value && isBooleanGridCell(item, actualColIdx) && value !== null;
   return dataGridCellTextClass({
     colorizeTypes: colorizeDataGridCellTypes.value,
     typeKind: allColumnTypeVisualKinds.value[actualColIdx] ?? "unknown",
-    isNull: value === null,
+    isNull: isGridNull,
     isDraft: item.isDraft && value === null,
     isEditing: editingCell.value?.rowId === item.id && editingCell.value.col === actualColIdx,
     isControl: checkbox,
@@ -2041,13 +2041,13 @@ function transposeCellTextColorClass(recordIndex: number, actualColIdx: number):
   const item = displayItems.value[recordIndex];
   if (!item) return "text-foreground";
   const value = item.data[actualColIdx];
-  const isMongoDocumentNull = props.mongoCollectionGrid === true && value === MONGO_DOCUMENT_GRID_NULL;
-  if (isMongoDocumentNull) return "text-muted-foreground italic";
+  const isGridNull = value === null || (props.mongoCollectionGrid === true && value === MONGO_DOCUMENT_GRID_NULL);
+  if (isGridNull) return "text-muted-foreground italic";
   if (!colorizeDataGridCellTypes.value) return "text-foreground";
   return dataGridCellTextClass({
     colorizeTypes: colorizeDataGridCellTypes.value,
     typeKind: allColumnTypeVisualKinds.value[actualColIdx] ?? "unknown",
-    isNull: value === null,
+    isNull: isGridNull,
     isDraft: item.isDraft && value === null,
     isEditing: editingCell.value?.rowId === item.id && editingCell.value.col === actualColIdx,
     isControl: booleanCellsUseCheckbox.value && isBooleanGridCell(item, actualColIdx) && value !== null,
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridCellTypeVisual.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridCellTypeVisual.spec.ts
index feaf35fd1c..a29bd89091 100644
--- a/apps/desktop/src/lib/__tests__/dataGrid/dataGridCellTypeVisual.spec.ts
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridCellTypeVisual.spec.ts
@@ -98,15 +98,20 @@ describe("data grid cell text visual priority", () => {
     expect(resolveDataGridCellTextRole({ ...ordinaryInteger, ...override })).toBe("muted");
   });
 
+  it("keeps NULL muted when type colors are disabled", () => {
+    expect(resolveDataGridCellTextRole({ ...ordinaryInteger, colorizeTypes: false, isNull: true })).toBe("muted");
+  });
+
   it("uses a neutral foreground on editable DOM hover surfaces", () => {
     expect(dataGridSource).toContain("'hover:bg-gray-200 hover:text-foreground dark:hover:bg-gray-800':");
     expect(dataGridSource).toContain("'cursor-text hover:bg-gray-200 hover:text-foreground dark:hover:bg-gray-800':");
   });
 
-  it("keeps Mongo BSON null muted when type colors are disabled", () => {
-    const mongoNullPriority = 'const isMongoDocumentNull = props.mongoCollectionGrid === true && value === MONGO_DOCUMENT_GRID_NULL;\n  if (isMongoDocumentNull) return "text-muted-foreground italic";\n  if (!colorizeDataGridCellTypes.value) return "text-foreground";';
-
-    expect(dataGridSource.split(mongoNullPriority)).toHaveLength(3);
+  it("checks NULL before applying the optional type-color setting", () => {
+    expect(dataGridSource).toContain("function gridCellTextColorClass(item: RowItem, actualColIdx: number, visibleColIdx: number): string {\n  const value = item.data[actualColIdx];");
+    expect(dataGridSource).toContain("function transposeCellTextColorClass(recordIndex: number, actualColIdx: number): string {\n  const item = displayItems.value[recordIndex];");
+    expect(dataGridSource).not.toContain('function gridCellTextColorClass(item: RowItem, actualColIdx: number, visibleColIdx: number): string {\n  if (!colorizeDataGridCellTypes.value) return "text-foreground";');
+    expect(dataGridSource).not.toContain('function transposeCellTextColorClass(recordIndex: number, actualColIdx: number): string {\n  if (!colorizeDataGridCellTypes.value) return "text-foreground";');
   });
 
   it("places data-grid type selectors in the components layer", () => {