From f4ab4a32e81a9866c99964369d309096a241bf2b Mon Sep 17 00:00:00 2001
From: Pierre Wizla <pwizla+github@gmail.com>
Date: Thu, 20 Nov 2025 22:14:21 +0100
Subject: [PATCH] Add example to Theme extension documentation (#2850)

* docs(backend): correct TypeScript code fences in TS tabs (controllers, services, middlewares, routes)

* docs(bundlers): clarify webpack config example rename and JS/TS filenames

* docs(routes): add guidance to prefer fully-qualified handler names in custom routers

* docs(api-tokens): add concise security tip (least privilege, rotation, secrets manager)

* docs(controllers): add caution about validateQuery/sanitizeQuery/sanitizeOutput when overriding actions

* docs(policies): clarify scoped policy folders and fix example path

* docs(webhooks): add signature verification tip and fix TS config path

* docs(theme-extension): add minimal TS example for theme.light and theme.dark overrides

* Limit PR scope based on title; keep only intended doc(s); revert unrelated files

* Refactor example into Docusaurus Tabs with JS and TS; remove extra H3 heading (PR #2850)

* Theme extension docs: fix JS example to quote color hex strings (keep ESM export)

* Theme extension docs: add one-sentence intro above JS/TS example (PR #2850)

* Fix intro sentence placement outside frontmatter; position above Tabs (PR #2850)

* Place example intro sentence after Strapi callout and before Tabs (PR #2850)

* Fix frontmatter formatting: remove blank line after tags (PR #2850)

* Theme extension docs: remove explicit 'both JavaScript and TypeScript' wording; Tabs already indicate languages (PR #2850)

* Theme extension: link to Admin panel configuration and use full wording (PR #2850)

* Theme extension: fix internal Markdown link syntax to /cms/configurations/admin-panel (PR #2850)

---------

Co-authored-by: GitHub Actions <noreply@github.com>
---
 .../theme-extension.md                        | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

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>