diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx
index 6d7eb26f94f..328bad99364 100644
--- a/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx
+++ b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx
@@ -1,212 +1,214 @@
-import { composeStories } from "@storybook/react";
+import { globalTypes } from ".storybook/preview";
+import { ModeValues } from "@salt-ds/core";
 import * as agGridStories from "@stories/ag-grid-theme.stories";
+import { composeStories } from "@storybook/react";
+import { withTheme } from "docs/decorators/withTheme";
 
-const {
-  BasicGrid,
-  CheckboxSelection,
-  ContextMenu,
-  CustomFilter,
-  HDCompact,
-  HDCompactDark,
-} = composeStories(agGridStories);
+ModeValues.forEach((mode) => {
+  const { BasicGrid, CheckboxSelection, ContextMenu, CustomFilter, HDCompact } =
+    composeStories(agGridStories, {
+      decorators: [withTheme],
+      globalTypes: { mode: { ...globalTypes.mode, defaultValue: mode } },
+    }); // `globals` doesn't work, so override defaultValue as workaround
 
-describe("Given Ag Grid Theme", () => {
-  describe("WHEN the Default story is mounted", () => {
-    describe("WHEN column menu is open", () => {
-      describe("AND general tab is selected", () => {
-        it("THEN should match screenshot", () => {
-          cy.mount(<BasicGrid />);
-          cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+  describe(`Given Ag Grid Theme in ${mode} mode`, () => {
+    describe("WHEN the Default story is mounted", () => {
+      describe("WHEN column menu is open", () => {
+        describe("AND general tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<BasicGrid />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND filter tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<BasicGrid />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="filter"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND columns tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<BasicGrid />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="columns"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
         });
       });
-      describe("AND filter tab is selected", () => {
-        it("THEN should match screenshot", () => {
+      describe("AND cell is hovered", () => {
+        it("THEN should show tooltip", () => {
           cy.mount(<BasicGrid />);
           cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="filter"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          cy.findByText("Capital").realHover();
+          cy.findAllByText("Capital").should("have.length", 2);
+          cy.get(".ag-tooltip").should(
+            "have.css",
+            "background-color",
+            mode === "light" ? "rgb(255, 255, 255)" : "rgb(36, 37, 38)"
+          );
         });
       });
-      describe("AND columns tab is selected", () => {
-        it("THEN should match screenshot", () => {
+      describe("WHEN range selection", () => {
+        it("AND selection vertical THEN should match screenshot", () => {
           cy.mount(<BasicGrid />);
           cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="columns"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
-        });
-      });
-    });
-    describe("AND cell is hovered", () => {
-      it("THEN should show tooltip", () => {
-        cy.mount(<BasicGrid />);
-        cy.wait(500);
-        cy.findByText("Capital").realHover();
-        cy.findAllByText("Capital").should("have.length", 2);
-        cy.get(".ag-tooltip").should(
-          "have.css",
-          "background-color",
-          "rgb(255, 255, 255)"
-        );
-      });
-    });
-    describe("WHEN range selection", () => {
-      it("AND selection vertical THEN should match screenshot", () => {
-        cy.mount(<BasicGrid />);
-        cy.wait(500);
 
-        cy.get(".ag-cell")
-          .eq(0)
-          .realMouseDown({ scrollBehavior: false })
-          .should("have.class", "ag-cell-range-selected")
-          .realMouseMove(0, 100, { scrollBehavior: false });
+          cy.get(".ag-cell")
+            .eq(0)
+            .realMouseDown({ scrollBehavior: false })
+            .should("have.class", "ag-cell-range-selected")
+            .realMouseMove(0, 100, { scrollBehavior: false });
 
-        cy.get(".ag-cell")
-          .eq(6)
-          .realMouseUp({ scrollBehavior: false })
-          .realMouseWheel({ deltaY: -100 });
+          cy.get(".ag-cell")
+            .eq(6)
+            .realMouseUp({ scrollBehavior: false })
+            .realMouseWheel({ deltaY: -100 });
 
-        cy.get(".ag-cell-range-selected").should("have.length", 3);
+          cy.get(".ag-cell-range-selected").should("have.length", 3);
 
-        cy.wait(500);
+          cy.wait(500);
 
-        cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 });
-      });
+          cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 });
+        });
 
-      it("AND selection horizontal THEN should match screenshot", () => {
-        cy.mount(<BasicGrid />);
-        cy.wait(500);
+        it("AND selection horizontal THEN should match screenshot", () => {
+          cy.mount(<BasicGrid />);
+          cy.wait(500);
 
-        cy.get(".ag-cell")
-          .eq(0)
-          .realMouseDown({ scrollBehavior: false })
-          .should("have.class", "ag-cell-range-selected")
-          .realMouseMove(600, 0, { scrollBehavior: false });
+          cy.get(".ag-cell")
+            .eq(0)
+            .realMouseDown({ scrollBehavior: false })
+            .should("have.class", "ag-cell-range-selected")
+            .realMouseMove(600, 0, { scrollBehavior: false });
 
-        cy.get(".ag-cell").eq(3).realMouseUp({ scrollBehavior: false });
+          cy.get(".ag-cell").eq(3).realMouseUp({ scrollBehavior: false });
 
-        cy.get(".ag-cell-range-selected").should("have.length", 3);
+          cy.get(".ag-cell-range-selected").should("have.length", 3);
 
-        cy.wait(500);
+          cy.wait(500);
 
-        cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 });
-      });
-    });
-  });
-  describe("WHEN the CheckboxSelection story is mounted", () => {
-    describe("WHEN editable-cell is focused", () => {
-      it("THEN should match screenshot", () => {
-        cy.mount(<CheckboxSelection />);
-        cy.wait(500);
-        cy.get(".editable-cell").realClick();
-        cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 });
-      });
-    });
-    describe("WHEN editable-cell is in edit mode", () => {
-      it("THEN should match screenshot", () => {
-        cy.mount(<CheckboxSelection />);
-        cy.wait(500);
-        cy.get(".editable-cell").realClick({ clickCount: 2 });
-        cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 });
+          cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 });
+        });
       });
     });
-    describe("WHEN number-cell column menu is open", () => {
-      describe("AND filter tab is selected", () => {
+    describe("WHEN the CheckboxSelection story is mounted", () => {
+      describe("WHEN editable-cell is focused", () => {
         it("THEN should match screenshot", () => {
           cy.mount(<CheckboxSelection />);
           cy.wait(500);
-          cy.contains("Population")
-            .parent()
-            .prev(".ag-header-cell-menu-button")
-            .realClick();
-          cy.get('[aria-label="filter"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          cy.get(".editable-cell").realClick();
+          cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 });
         });
       });
-    });
-  });
-  describe("WHEN the ContextMenu story is mounted", () => {
-    describe("WHEN cell context menu is open", () => {
-      it("THEN should match screenshot", () => {
-        cy.mount(<ContextMenu />);
-        cy.wait(500);
-        cy.findByText("Alabama").rightclick();
-        cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
-      });
-    });
-  });
-  describe("WHEN the CustomFilter story is mounted", () => {
-    describe("WHEN custom filter is focused", () => {
-      it("THEN should match screenshot", () => {
-        cy.mount(<CustomFilter />);
-        cy.wait(500);
-        cy.get(".ag-floating-filter-input").realClick();
-        cy.focused()
-          .parents(".ag-floating-filter")
-          .matchImage({ maxDiffThreshold: 0.1 });
-      });
-    });
-  });
-  describe("WHEN the HDCompact story is mounted", () => {
-    describe("WHEN column menu is open", () => {
-      describe("AND general tab is selected", () => {
+      describe("WHEN editable-cell is in edit mode", () => {
         it("THEN should match screenshot", () => {
-          cy.mount(<HDCompact />);
+          cy.mount(<CheckboxSelection />);
           cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          cy.get(".editable-cell").realClick({ clickCount: 2 });
+          cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 });
         });
       });
-      describe("AND filter tab is selected", () => {
-        it("THEN should match screenshot", () => {
-          cy.mount(<HDCompact />);
-          cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="filter"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+      describe("WHEN number-cell column menu is open", () => {
+        describe("AND filter tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<CheckboxSelection />);
+            cy.wait(500);
+            cy.contains("Population")
+              .parent()
+              .prev(".ag-header-cell-menu-button")
+              .realClick();
+            cy.get('[aria-label="filter"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
         });
       });
-      describe("AND columns tab is selected", () => {
+    });
+    describe("WHEN the ContextMenu story is mounted", () => {
+      describe("WHEN cell context menu is open", () => {
         it("THEN should match screenshot", () => {
-          cy.mount(<HDCompact />);
-          cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="columns"]').realClick();
+          cy.mount(<ContextMenu />);
           cy.wait(500);
+          cy.findByText("Alabama").rightclick();
           cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
         });
       });
     });
-  });
-  describe("WHEN the HDCompactDark story is mounted", () => {
-    describe("WHEN column menu is open", () => {
-      describe("AND general tab is selected", () => {
+    describe("WHEN the CustomFilter story is mounted", () => {
+      describe("WHEN custom filter is focused", () => {
         it("THEN should match screenshot", () => {
-          cy.mount(<HDCompactDark />);
+          cy.mount(<CustomFilter />);
           cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          cy.get(".ag-floating-filter-input").realClick();
+          cy.focused()
+            .parents(".ag-floating-filter")
+            .matchImage({ maxDiffThreshold: 0.1 });
         });
       });
-      describe("AND filter tab is selected", () => {
-        it("THEN should match screenshot", () => {
-          cy.mount(<HDCompactDark />);
-          cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="filter"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+    });
+    describe("WHEN the HDCompact story is mounted", () => {
+      describe("WHEN column menu is open", () => {
+        describe("AND general tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND filter tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="filter"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND columns tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="columns"]').realClick();
+            cy.wait(500);
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
         });
       });
-      describe("AND columns tab is selected", () => {
-        it("THEN should match screenshot", () => {
-          cy.mount(<HDCompactDark />);
-          cy.wait(500);
-          cy.get(".ag-header-cell-menu-button").realClick();
-          cy.get('[aria-label="columns"]').realClick();
-          cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+    });
+    describe("WHEN the HDCompact story is mounted", () => {
+      describe("WHEN column menu is open", () => {
+        describe("AND general tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND filter tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="filter"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
+        });
+        describe("AND columns tab is selected", () => {
+          it("THEN should match screenshot", () => {
+            cy.mount(<HDCompact />);
+            cy.wait(500);
+            cy.get(".ag-header-cell-menu-button").realClick();
+            cy.get('[aria-label="columns"]').realClick();
+            cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 });
+          });
         });
       });
     });
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png
deleted file mode 100644
index df7d7a82e34..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png
deleted file mode 100644
index bd955ca0ff3..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index fdf2fb18f4d..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png
deleted file mode 100644
index d744eb5c43f..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 50e6e69bfde..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 7f36d1c46cc..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png
deleted file mode 100644
index 8b802cb1462..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png
deleted file mode 100644
index f364b302be4..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 7f562c8db48..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 9ce1bc6a5c7..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index ab5d7c3ca5f..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 57bf9cb2fc7..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
deleted file mode 100644
index 8b5caa64373..00000000000
Binary files a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png and /dev/null differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png
new file mode 100644
index 00000000000..89584662cda
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png
new file mode 100644
index 00000000000..f99c9ae7231
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..072cb508b04
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png
new file mode 100644
index 00000000000..3f631db342c
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png
new file mode 100644
index 00000000000..47ed8e99374
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..f10b10ce1bb
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..56d09be42ac
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..10cfaf94e98
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..10cfaf94e98
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png
new file mode 100644
index 00000000000..10cfaf94e98
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png
new file mode 100644
index 00000000000..f4de35e2dec
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png
new file mode 100644
index 00000000000..938be3e5ce7
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..f5d6e6790c5
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..f5d6e6790c5
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..018b6e684b9
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..018b6e684b9
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..d6646353888
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..d6646353888
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in dark mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png
new file mode 100644
index 00000000000..fd297165895
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png
new file mode 100644
index 00000000000..c2ce1b95a24
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..94913d5205a
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png
similarity index 100%
rename from packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png
rename to packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png
new file mode 100644
index 00000000000..34563a42b1f
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..46e6e0beadc
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..46e6e0beadc
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..2063120605a
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..2063120605a
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
similarity index 100%
rename from packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
rename to packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.actual.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.actual.png
new file mode 100644
index 00000000000..b44b2308ac6
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.actual.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..ed248897583
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png
new file mode 100644
index 00000000000..ed248897583
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #2.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png
new file mode 100644
index 00000000000..212616eb841
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #1.png
new file mode 100644
index 00000000000..212616eb841
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png
new file mode 100644
index 00000000000..d9fffa49cea
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #1.png
new file mode 100644
index 00000000000..d9fffa49cea
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..8e1b202c75d
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..8e1b202c75d
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png
new file mode 100644
index 00000000000..d162a26d778
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..d162a26d778
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
similarity index 100%
rename from packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
rename to packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png
diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png
new file mode 100644
index 00000000000..61a1a76a49c
Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme in light mode WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #1.png differ
diff --git a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
index 1ba1d60028e..1774e009600 100644
--- a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
+++ b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts
@@ -57,7 +57,7 @@ export function useAgGridHelpers({
     }
   }, [density, compact]);
 
-  const className = `ag-theme-salt-${
+  const className = `ag-theme-salt${
     compact && density === "high" ? `-compact` : ``
   }-${mode}`;
 
diff --git a/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
index ccb3874209a..d7fcc4087a9 100644
--- a/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
+++ b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx
@@ -19,8 +19,4 @@ const CheckboxSelection = (props: AgGridReactProps) => {
   );
 };
 
-CheckboxSelection.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default CheckboxSelection;
diff --git a/packages/ag-grid-theme/src/examples/Coloration.tsx b/packages/ag-grid-theme/src/examples/Coloration.tsx
index 4b4924eb9df..907e1aa9f88 100644
--- a/packages/ag-grid-theme/src/examples/Coloration.tsx
+++ b/packages/ag-grid-theme/src/examples/Coloration.tsx
@@ -18,8 +18,4 @@ const Coloration = (props: AgGridReactProps) => {
   );
 };
 
-Coloration.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default Coloration;
diff --git a/packages/ag-grid-theme/src/examples/ColumnGroup.tsx b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
index bc80fe7025f..b6b360878ac 100644
--- a/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
+++ b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx
@@ -60,8 +60,4 @@ const columnsWithGrouping = (groupName: string): (ColGroupDef | ColDef)[] => [
   },
 ];
 
-ColumnGroup.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default ColumnGroup;
diff --git a/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
index a2b84086da4..6a9a63d0204 100644
--- a/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
+++ b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx
@@ -18,8 +18,4 @@ const ColumnSpanning = (props: AgGridReactProps) => {
   );
 };
 
-ColumnSpanning.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default ColumnSpanning;
diff --git a/packages/ag-grid-theme/src/examples/ContextMenu.tsx b/packages/ag-grid-theme/src/examples/ContextMenu.tsx
index 81fdf949005..c1911058f7f 100644
--- a/packages/ag-grid-theme/src/examples/ContextMenu.tsx
+++ b/packages/ag-grid-theme/src/examples/ContextMenu.tsx
@@ -153,8 +153,4 @@ const ContextMenu = (props: AgGridReactProps) => {
   );
 };
 
-ContextMenu.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default ContextMenu;
diff --git a/packages/ag-grid-theme/src/examples/CustomFilter.tsx b/packages/ag-grid-theme/src/examples/CustomFilter.tsx
index e440f848a25..0e1860a2d56 100644
--- a/packages/ag-grid-theme/src/examples/CustomFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/CustomFilter.tsx
@@ -100,8 +100,4 @@ const CustomFilter = (props: AgGridReactProps) => {
   );
 };
 
-CustomFilter.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default CustomFilter;
diff --git a/packages/ag-grid-theme/src/examples/Default.tsx b/packages/ag-grid-theme/src/examples/Default.tsx
index ef3c955e0f0..95219579d97 100644
--- a/packages/ag-grid-theme/src/examples/Default.tsx
+++ b/packages/ag-grid-theme/src/examples/Default.tsx
@@ -38,8 +38,4 @@ const Default = (props: AgGridReactProps) => {
   );
 };
 
-Default.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default Default;
diff --git a/packages/ag-grid-theme/src/examples/DragRowOrder.tsx b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
index 5f8edfc0268..a7be200abf1 100644
--- a/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
+++ b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx
@@ -20,8 +20,4 @@ const DragRowOrder = (props: AgGridReactProps) => {
   );
 };
 
-DragRowOrder.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default DragRowOrder;
diff --git a/packages/ag-grid-theme/src/examples/FloatingFilter.tsx b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
index ed786605d57..dfed46e6b79 100644
--- a/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx
@@ -19,8 +19,4 @@ const FloatingFilter = (props: AgGridReactProps) => {
   );
 };
 
-FloatingFilter.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default FloatingFilter;
diff --git a/packages/ag-grid-theme/src/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx
index 01c7fec035e..c58fe315ded 100644
--- a/packages/ag-grid-theme/src/examples/HDCompact.tsx
+++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx
@@ -48,8 +48,4 @@ const HDCompact = (props: AgGridReactProps) => {
   );
 };
 
-HDCompact.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default HDCompact;
diff --git a/packages/ag-grid-theme/src/examples/HDCompactDark.tsx b/packages/ag-grid-theme/src/examples/HDCompactDark.tsx
deleted file mode 100644
index 9dfbde40785..00000000000
--- a/packages/ag-grid-theme/src/examples/HDCompactDark.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { SaltProvider } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
-import dataGridExampleData from "../dependencies/dataGridExampleData";
-import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
-
-const statusBar = {
-  statusPanels: [
-    {
-      statusPanel: "agTotalRowCountComponent",
-      align: "left",
-    },
-    { statusPanel: "agFilteredRowCountComponent" },
-    { statusPanel: "agSelectedRowCountComponent" },
-    { statusPanel: "agAggregationComponent" },
-  ],
-};
-
-const HDCompactDark = (props: AgGridReactProps) => {
-  const mode = "dark";
-  const { agGridProps, containerProps } = useAgGridHelpers({
-    compact: true,
-    density: "high",
-    mode,
-  });
-
-  return (
-    <SaltProvider mode={mode} density="high">
-      <div {...containerProps}>
-        <AgGridReact
-          columnDefs={dataGridExampleColumns}
-          rowData={dataGridExampleData}
-          statusBar={statusBar}
-          rowSelection="multiple"
-          {...agGridProps}
-          {...props}
-          enableRangeSelection={true}
-          onFirstDataRendered={(params) => {
-            params.api.forEachNode((node, index) => {
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-              if (node.data && index < 3) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-                node.setSelected(true);
-              }
-            });
-          }}
-        />
-      </div>
-    </SaltProvider>
-  );
-};
-
-HDCompactDark.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
-export default HDCompactDark;
diff --git a/packages/ag-grid-theme/src/examples/Icons.tsx b/packages/ag-grid-theme/src/examples/Icons.tsx
index 0617ee73f03..ecce1b558bd 100644
--- a/packages/ag-grid-theme/src/examples/Icons.tsx
+++ b/packages/ag-grid-theme/src/examples/Icons.tsx
@@ -65,8 +65,4 @@ const Icons = () => {
   );
 };
 
-Icons.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default Icons;
diff --git a/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
index 82c3828b905..4a01ccb3da7 100644
--- a/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
+++ b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx
@@ -68,8 +68,4 @@ const infiniteScrollComponents = {
   },
 };
 
-InfiniteScroll.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default InfiniteScroll;
diff --git a/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx b/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx
index 7dd27b15fd2..684e7a958d5 100644
--- a/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx
+++ b/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx
@@ -54,8 +54,4 @@ const LoadingOverlay = (props: AgGridReactProps) => {
   );
 };
 
-LoadingOverlay.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default LoadingOverlay;
diff --git a/packages/ag-grid-theme/src/examples/MasterDetail.tsx b/packages/ag-grid-theme/src/examples/MasterDetail.tsx
index c5c497cda34..1e0dd4fee0f 100644
--- a/packages/ag-grid-theme/src/examples/MasterDetail.tsx
+++ b/packages/ag-grid-theme/src/examples/MasterDetail.tsx
@@ -53,8 +53,4 @@ const MasterDetail = (props: AgGridReactProps) => {
   );
 };
 
-MasterDetail.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default MasterDetail;
diff --git a/packages/ag-grid-theme/src/examples/MasterDetailDark.tsx b/packages/ag-grid-theme/src/examples/MasterDetailDark.tsx
index b7947e0eee7..408242080fd 100644
--- a/packages/ag-grid-theme/src/examples/MasterDetailDark.tsx
+++ b/packages/ag-grid-theme/src/examples/MasterDetailDark.tsx
@@ -61,8 +61,4 @@ const MasterDetailDark = (props: AgGridReactProps) => {
   );
 };
 
-MasterDetailDark.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default MasterDetailDark;
diff --git a/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
index b566903ee94..d05516f3e17 100644
--- a/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
+++ b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx
@@ -122,8 +122,4 @@ const NoDataOverlay = (props: AgGridReactProps) => {
   );
 };
 
-NoDataOverlay.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default NoDataOverlay;
diff --git a/packages/ag-grid-theme/src/examples/Pagination.tsx b/packages/ag-grid-theme/src/examples/Pagination.tsx
index 9df907385f3..7e2443fad94 100644
--- a/packages/ag-grid-theme/src/examples/Pagination.tsx
+++ b/packages/ag-grid-theme/src/examples/Pagination.tsx
@@ -30,8 +30,4 @@ const Pagination = (props: AgGridReactProps) => {
   );
 };
 
-Pagination.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default Pagination;
diff --git a/packages/ag-grid-theme/src/examples/ParentChildRows.tsx b/packages/ag-grid-theme/src/examples/ParentChildRows.tsx
index 2aaca6a18f4..0b52951df9c 100644
--- a/packages/ag-grid-theme/src/examples/ParentChildRows.tsx
+++ b/packages/ag-grid-theme/src/examples/ParentChildRows.tsx
@@ -26,8 +26,4 @@ const ParentChildRows = (props: AgGridReactProps) => {
   );
 };
 
-ParentChildRows.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default ParentChildRows;
diff --git a/packages/ag-grid-theme/src/examples/PinnedRows.tsx b/packages/ag-grid-theme/src/examples/PinnedRows.tsx
index 853bbeb2b78..b688998b39a 100644
--- a/packages/ag-grid-theme/src/examples/PinnedRows.tsx
+++ b/packages/ag-grid-theme/src/examples/PinnedRows.tsx
@@ -88,7 +88,3 @@ const PinnedRowsExample = function PinnedRowsExample({
 export default function PinnedRows(props: PinnedRowsExampleProps) {
   return <PinnedRowsExample {...props} />;
 }
-
-PinnedRows.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
diff --git a/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
index 49fc4b7b091..e9ba31cd575 100644
--- a/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
+++ b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx
@@ -22,8 +22,4 @@ const RowGroupPanel = (props: AgGridReactProps) => {
   );
 };
 
-RowGroupPanel.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default RowGroupPanel;
diff --git a/packages/ag-grid-theme/src/examples/RowGrouping.tsx b/packages/ag-grid-theme/src/examples/RowGrouping.tsx
index c6594dee815..ed11f879ff0 100644
--- a/packages/ag-grid-theme/src/examples/RowGrouping.tsx
+++ b/packages/ag-grid-theme/src/examples/RowGrouping.tsx
@@ -18,8 +18,4 @@ const RowGrouping = (props: AgGridReactProps) => {
   );
 };
 
-RowGrouping.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default RowGrouping;
diff --git a/packages/ag-grid-theme/src/examples/SortAndFilter.tsx b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
index baad1958b80..acf3bc80c8a 100644
--- a/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
+++ b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx
@@ -62,8 +62,4 @@ const SortAndFilter = (props: AgGridReactProps) => {
   );
 };
 
-SortAndFilter.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default SortAndFilter;
diff --git a/packages/ag-grid-theme/src/examples/StatusBar.tsx b/packages/ag-grid-theme/src/examples/StatusBar.tsx
index fd07712307b..fbafcd86c79 100644
--- a/packages/ag-grid-theme/src/examples/StatusBar.tsx
+++ b/packages/ag-grid-theme/src/examples/StatusBar.tsx
@@ -53,8 +53,4 @@ const StatusBar = (props: AgGridReactProps) => {
   );
 };
 
-StatusBar.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default StatusBar;
diff --git a/packages/ag-grid-theme/src/examples/StatusBarDark.tsx b/packages/ag-grid-theme/src/examples/StatusBarDark.tsx
deleted file mode 100644
index 7695cb870de..00000000000
--- a/packages/ag-grid-theme/src/examples/StatusBarDark.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { SaltProvider, StackLayout, Text } from "@salt-ds/core";
-import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
-import dataGridExampleData from "../dependencies/dataGridExampleData";
-import { useAgGridHelpers } from "../dependencies/useAgGridHelpers";
-
-const statusBar = {
-  statusPanels: [
-    {
-      statusPanel: "agTotalRowCountComponent",
-      align: "left",
-    },
-    { statusPanel: "agFilteredRowCountComponent" },
-    { statusPanel: "agSelectedRowCountComponent" },
-    { statusPanel: "agAggregationComponent" },
-  ],
-};
-
-const StatusBar = (props: AgGridReactProps) => {
-  const mode = "dark";
-  const { agGridProps, containerProps } = useAgGridHelpers();
-
-  return (
-    <SaltProvider mode={mode}>
-      <StackLayout gap={2}>
-        <Text>Select rows to enable status bar display</Text>
-        <div {...containerProps}>
-          <AgGridReact
-            {...agGridProps}
-            {...props}
-            enableRangeSelection
-            rowSelection="multiple"
-            statusBar={statusBar}
-            columnDefs={dataGridExampleColumns}
-            rowData={dataGridExampleData}
-            onFirstDataRendered={(params) => {
-              params.api.forEachNode((node, index) => {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                if (node.data && index < 3) {
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-                  node.setSelected(true);
-                }
-              });
-            }}
-          />
-        </div>
-      </StackLayout>
-    </SaltProvider>
-  );
-};
-
-StatusBar.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
-export default StatusBar;
diff --git a/packages/ag-grid-theme/src/examples/ToolPanel.tsx b/packages/ag-grid-theme/src/examples/ToolPanel.tsx
index 55d3fb1614b..376d924002a 100644
--- a/packages/ag-grid-theme/src/examples/ToolPanel.tsx
+++ b/packages/ag-grid-theme/src/examples/ToolPanel.tsx
@@ -84,8 +84,4 @@ const ToolPanel = (props: AgGridReactProps) => {
   );
 };
 
-ToolPanel.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default ToolPanel;
diff --git a/packages/ag-grid-theme/src/examples/VariantSecondary.tsx b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
index c883d743c48..fee9a15c3c2 100644
--- a/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx
@@ -31,8 +31,4 @@ const VariantSecondary = (props: AgGridReactProps) => {
   );
 };
 
-VariantSecondary.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default VariantSecondary;
diff --git a/packages/ag-grid-theme/src/examples/VariantSecondaryDark.tsx b/packages/ag-grid-theme/src/examples/VariantSecondaryDark.tsx
index 9b405673656..72d92dfb0e4 100644
--- a/packages/ag-grid-theme/src/examples/VariantSecondaryDark.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantSecondaryDark.tsx
@@ -38,8 +38,4 @@ const VariantZebraDark = (props: AgGridReactProps) => {
   );
 };
 
-VariantZebraDark.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default VariantZebraDark;
diff --git a/packages/ag-grid-theme/src/examples/VariantZebra.tsx b/packages/ag-grid-theme/src/examples/VariantZebra.tsx
index 6e783541dc4..9c7ee7497be 100644
--- a/packages/ag-grid-theme/src/examples/VariantZebra.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantZebra.tsx
@@ -31,8 +31,4 @@ const VariantZebra = (props: AgGridReactProps) => {
   );
 };
 
-VariantZebra.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default VariantZebra;
diff --git a/packages/ag-grid-theme/src/examples/VariantZebraDark.tsx b/packages/ag-grid-theme/src/examples/VariantZebraDark.tsx
index b1517b41c6e..4b4d5e9cc9e 100644
--- a/packages/ag-grid-theme/src/examples/VariantZebraDark.tsx
+++ b/packages/ag-grid-theme/src/examples/VariantZebraDark.tsx
@@ -38,8 +38,4 @@ const VariantZebraDark = (props: AgGridReactProps) => {
   );
 };
 
-VariantZebraDark.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default VariantZebraDark;
diff --git a/packages/ag-grid-theme/src/examples/WrappedHeader.tsx b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
index 83c8dc60f0b..ea9b7d2b2dd 100644
--- a/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
+++ b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx
@@ -63,8 +63,4 @@ const WrappedHeader = (props: AgGridReactProps) => {
   );
 };
 
-WrappedHeader.parameters = {
-  chromatic: { disableSnapshot: false, delay: 200 },
-};
-
 export default WrappedHeader;
diff --git a/packages/ag-grid-theme/src/examples/index.ts b/packages/ag-grid-theme/src/examples/index.ts
index 90c78a6d805..98bb08d0ac5 100644
--- a/packages/ag-grid-theme/src/examples/index.ts
+++ b/packages/ag-grid-theme/src/examples/index.ts
@@ -9,7 +9,6 @@ export { default as Coloration } from "./Coloration";
 export { default as Icons } from "./Icons";
 export { default as FloatingFilter } from "./FloatingFilter";
 export { default as HDCompact } from "./HDCompact";
-export { default as HDCompactDark } from "./HDCompactDark";
 export { default as LoadingOverlay } from "./LoadingOverlay";
 export { default as MasterDetail } from "./MasterDetail";
 export { default as MasterDetailDark } from "./MasterDetailDark";
@@ -22,7 +21,6 @@ export { default as RowGrouping } from "./RowGrouping";
 export { default as RowGroupPanel } from "./RowGroupPanel";
 export { default as SortAndFilter } from "./SortAndFilter";
 export { default as StatusBar } from "./StatusBar";
-export { default as StatusBarDark } from "./StatusBarDark";
 export { default as ToolPanel } from "./ToolPanel";
 export { default as VariantSecondary } from "./VariantSecondary";
 export { default as VariantSecondaryDark } from "./VariantSecondaryDark";
diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx
index 65dd5f3ddc2..21de42b6274 100644
--- a/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx
+++ b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx
@@ -5,6 +5,13 @@ import "../salt-ag-theme.css";
 export default {
   title: "Ag Grid/Ag Grid Theme",
   component: AgGridReact,
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+      delay: 200,
+      modes: { dual: { mode: "side-by-side" } },
+    },
+  },
 };
 
 export {
@@ -19,7 +26,6 @@ export {
   Icons,
   FloatingFilter,
   HDCompact,
-  HDCompactDark,
   InfiniteScroll,
   LoadingOverlay,
   MasterDetail,
@@ -32,7 +38,6 @@ export {
   PinnedRows,
   SortAndFilter,
   StatusBar,
-  StatusBarDark,
   ToolPanel,
   VariantSecondary,
   VariantSecondaryDark,