diff --git a/packages/techdocs-cli-embedded-app/package.json b/packages/techdocs-cli-embedded-app/package.json
index 8771d5c14b..c7c65ad55f 100644
--- a/packages/techdocs-cli-embedded-app/package.json
+++ b/packages/techdocs-cli-embedded-app/package.json
@@ -17,6 +17,7 @@
"@backstage/integration-react": "^1.0.1-next.1",
"@backstage/plugin-catalog": "^1.1.0-next.1",
"@backstage/plugin-techdocs": "^1.0.1-next.1",
+ "@backstage/techdocs-addons": "^0.0.0",
"@backstage/test-utils": "^1.0.1-next.1",
"@backstage/theme": "^0.2.15",
"@material-ui/core": "^4.11.0",
diff --git a/packages/techdocs-cli-embedded-app/src/App.tsx b/packages/techdocs-cli-embedded-app/src/App.tsx
index 51bdfbbb11..4583a1bc0e 100644
--- a/packages/techdocs-cli-embedded-app/src/App.tsx
+++ b/packages/techdocs-cli-embedded-app/src/App.tsx
@@ -16,20 +16,27 @@
import React from 'react';
import { Navigate, Route } from 'react-router';
-import { createApp } from '@backstage/app-defaults';
-import { FlatRoutes } from '@backstage/core-app-api';
-import { CatalogEntityPage } from '@backstage/plugin-catalog';
import {
DefaultTechDocsHome,
TechDocsIndexPage,
TechDocsReaderPage,
+ techdocsPlugin,
} from '@backstage/plugin-techdocs';
+import {
+ createTechDocsAddon,
+ TechDocsAddons,
+ TechDocsAddonLocations,
+} from '@backstage/techdocs-addons';
+import { createApp } from '@backstage/app-defaults';
+import { FlatRoutes } from '@backstage/core-app-api';
+import { CatalogEntityPage } from '@backstage/plugin-catalog';
+
import { apis } from './apis';
-import { Root } from './components/Root';
-import { techDocsPage } from './components/TechDocsPage';
import * as plugins from './plugins';
import { configLoader } from './config';
+import { Root } from './components/Root';
+import { techDocsPage, TechDocsThemeToggle } from './components/TechDocsPage';
const app = createApp({
apis,
@@ -40,6 +47,14 @@ const app = createApp({
const AppProvider = app.getProvider();
const AppRouter = app.getRouter();
+const ThemeToggleAddon = techdocsPlugin.provide(
+ createTechDocsAddon({
+ name: 'ThemeToggleAddon',
+ component: TechDocsThemeToggle,
+ location: TechDocsAddonLocations.HEADER,
+ }),
+);
+
const routes = (
@@ -56,6 +71,9 @@ const routes = (
element={}
>
{techDocsPage}
+
+
+
);
diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx
index 7bfe7642ff..8c44336d73 100644
--- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx
+++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx
@@ -92,7 +92,7 @@ const TechdocsThemeProvider: FC = ({ children }) => {
const useTechDocsTheme = () => useContext(TechDocsThemeContext);
-const TechDocsThemeToggle = () => {
+export const TechDocsThemeToggle = () => {
const classes = useStyles();
const { theme, toggleTheme } = useTechDocsTheme();
@@ -121,12 +121,10 @@ const TechDocsThemeToggle = () => {
};
export const techDocsPage = (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
index 8875581473..45ebe3ae0f 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import React, { FC, useEffect } from 'react';
+import React, { useEffect } from 'react';
import Helmet from 'react-helmet';
import { Skeleton } from '@material-ui/lab';