(chore) Adding support for Chromatic dark snapshots (#8011)

Author: mm-wang

.storybook/main.ts

@@ -49,7 +49,7 @@ const storybookConfig: StorybookConfig = {
         });
     },
 
-    addons: [getAbsolutePath("@storybook/addon-a11y")],
+    addons: [getAbsolutePath("@storybook/addon-a11y"), getAbsolutePath("@storybook/addon-themes")],
 };
 
 // eslint-disable-next-line import/no-default-export

.storybook/modes.ts

@@ -0,0 +1,16 @@
+/* !
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { Colors } from "@blueprintjs/core";
+
+export const modes = {
+    dark: {
+        backgrounds: { value: Colors.BLACK },
+        theme: "dark",
+    },
+    light: {
+        backgrounds: { value: Colors.WHITE },
+        theme: "light",
+    },
+} as const;

.storybook/preview.tsx

@@ -2,12 +2,15 @@
  * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
  */
 
+import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react-vite";
 
 import { BlueprintProvider, Classes, Colors, FocusStyleManager } from "@blueprintjs/core";
 
 import { Icons } from "../packages/icons/src/iconLoader";
 
+import { modes } from "./modes";
+
 FocusStyleManager.onlyShowFocusOnTabs();
 
 Icons.setLoaderOptions({ loader: "all" });
@@ -24,17 +27,11 @@ import "@blueprintjs/table/lib/css/table.css";
 
 const preview: Preview = {
     parameters: {
-        backgrounds: {
-            options: {
-                light: {
-                    name: "light",
-                    value: "#ffffff",
-                },
-
-                dark: {
-                    name: "dark",
-                    value: Colors.BLACK,
-                },
+        backgrounds: { disable: true },
+        chromatic: {
+            modes: {
+                dark: modes.dark,
+                light: modes.light,
             },
         },
         controls: {
@@ -46,16 +43,19 @@ const preview: Preview = {
     },
 
     decorators: [
+        withThemeByClassName({
+            defaultTheme: "light",
+            parentSelector: "body",
+            themes: {
+                dark: Classes.DARK,
+                light: "",
+            },
+        }),
         (Story, context) => {
-            // Toggle Blueprint dark mode via the Backgrounds toolbar (light / dark).
-            const bg = context.globals?.backgrounds;
-            const isDark = bg?.value === Colors.BLACK || bg?.value === "dark" || bg?.name === "dark";
+            const isDark = context.globals?.theme === "dark";
             if (typeof document !== "undefined" && document.body) {
-                if (isDark) {
-                    document.body.classList.add(Classes.DARK);
-                } else {
-                    document.body.classList.remove(Classes.DARK);
-                }
+                // Setting dark background based on class
+                document.body.style.backgroundColor = isDark ? Colors.BLACK : Colors.WHITE;
             }
             return (
                 <BlueprintProvider>
@@ -66,9 +66,7 @@ const preview: Preview = {
     ],
 
     initialGlobals: {
-        backgrounds: {
-            value: "light",
-        },
+        theme: "light",
     },
 };
 

package.json

@@ -94,6 +94,7 @@
     "license": "Apache-2.0",
     "devDependencies": {
         "@storybook/addon-a11y": "^10.2.14",
+        "@storybook/addon-themes": "^10.2.14",
         "@storybook/icons": "^2.0.1",
         "@storybook/react-dom-shim": "^10.2.14",
         "@storybook/react-vite": "^10.2.14",