diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md
index 4884e04a003b2..2763c082e4d7d 100644
--- a/docs/data/introduction/support/support.md
+++ b/docs/data/introduction/support/support.md
@@ -28,7 +28,14 @@ It significantly increases the odds of fixing the problem.
 You have a few possible options to provide it:
 
 - You can browse the documentation, find an example close to your use case, and then open it in a live editor:
-  [![Forking an example](https://mui.com/static/docs-infra/forking-an-example.png)](/x/react-date-pickers/getting-started/#render-your-first-component)
+  <a href="/x/react-date-pickers/getting-started/#render-your-first-component">
+  <span class="only-light-mode">
+  <img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
+  </span>
+  <span class="only-dark-mode">
+  <img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
+  </span>
+  </a>
 
   - [Data Grid](/x/react-data-grid/#mit-version-free-forever)
   - [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
diff --git a/docs/public/static/docs-infra/forking-an-example-dark.png b/docs/public/static/docs-infra/forking-an-example-dark.png
new file mode 100644
index 0000000000000..1e388c6ec7603
Binary files /dev/null and b/docs/public/static/docs-infra/forking-an-example-dark.png differ
diff --git a/docs/public/static/docs-infra/forking-an-example.png b/docs/public/static/docs-infra/forking-an-example.png
new file mode 100644
index 0000000000000..d1a46bb379590
Binary files /dev/null and b/docs/public/static/docs-infra/forking-an-example.png differ