diff --git a/docs/configure/storybook-custom-theme.png b/docs/configure/storybook-custom-theme.png
index 00eeecc11e7..5d3ce56c36f 100644
Binary files a/docs/configure/storybook-custom-theme.png and b/docs/configure/storybook-custom-theme.png differ
diff --git a/docs/configure/storybook-starter-custom-theme.png b/docs/configure/storybook-starter-custom-theme.png
index 664d9e79d24..94517da6304 100644
Binary files a/docs/configure/storybook-starter-custom-theme.png and b/docs/configure/storybook-starter-custom-theme.png differ
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index 55e8118bb38..cef6b52c039 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -12,9 +12,17 @@ Storybook includes two themes that look good out of the box: "light" and "dark".
 
 Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages.
 
-```sh
-yarn add --dev @storybook/addons @storybook/theming
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-theming-packages-install.yarn.js.mdx',
+    'common/storybook-theming-packages-install.npm.js.mdx',
+    'common/storybook-theming-packages-install.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering):
 
diff --git a/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx b/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx
new file mode 100644
index 00000000000..3312966169b
--- /dev/null
+++ b/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/addons @storybook/theming
+```
diff --git a/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx b/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx
new file mode 100644
index 00000000000..f8783f2770c
--- /dev/null
+++ b/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm add --save-dev @storybook/addons @storybook/theming
+```
diff --git a/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx b/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx
new file mode 100644
index 00000000000..2355e3d4452
--- /dev/null
+++ b/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/addons @storybook/theming
+```