diff --git a/docusaurus/docs/cms/admin-panel-customization/theme-extension.md b/docusaurus/docs/cms/admin-panel-customization/theme-extension.md
index 67593b76c0..42e80916a3 100644
--- a/docusaurus/docs/cms/admin-panel-customization/theme-extension.md
+++ b/docusaurus/docs/cms/admin-panel-customization/theme-extension.md
@@ -19,5 +19,60 @@ To extend the theme, use either:
 - the `config.theme.dark` key for the Dark mode
 
 :::strapi Strapi Design System
+
 The default <ExternalLink to="https://github.com/strapi/design-system/tree/main/packages/design-system/src/themes" text="Strapi theme"/> defines various theme-related keys (shadows, colors…) that can be updated through the `config.theme.light` and `config.theme.dark` keys in `./admin/src/app.js`. The <ExternalLink to="https://design-system.strapi.io/" text="Strapi Design System"/> is fully customizable and has a dedicated <ExternalLink to="https://design-system-git-main-strapijs.vercel.app" text="StoryBook"/> documentation.
 :::
+
+The following example shows how to override the primary color by customizing the light and dark theme keys in the [admin panel configuration](/cms/configurations/admin-panel):
+
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
+```js title="/src/admin/app.js"
+export default {
+  config: {
+    theme: {
+      light: {
+        colors: {
+          primary600: "#4A6EFF",
+        },
+      },
+      dark: {
+        colors: {
+          primary600: "#9DB2FF",
+        },
+      },
+    },
+  },
+  bootstrap() {},
+}
+```
+
+</TabItem>
+
+<TabItem value="ts" label="TypeScript">
+
+
+```ts title="/src/admin/app.ts"
+export default {
+  config: {
+    theme: {
+      light: {
+        colors: {
+          primary600: '#4A6EFF',
+        },
+      },
+      dark: {
+        colors: {
+          primary600: '#9DB2FF',
+        },
+      },
+    },
+  },
+  bootstrap() {},
+}
+```
+
+</TabItem>
+</Tabs>