From b628d30a2b0303c66ba96fd46c0d6fc8a6d82505 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 8 Sep 2023 11:43:30 +0200
Subject: [PATCH] frontend-app-api: add support for default app themes

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 packages/frontend-app-api/src/createApp.tsx | 30 ++++++++++++++++-----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-app-api/src/createApp.tsx b/packages/frontend-app-api/src/createApp.tsx
index 77f0d1948a..41d16a7a9a 100644
--- a/packages/frontend-app-api/src/createApp.tsx
+++ b/packages/frontend-app-api/src/createApp.tsx
@@ -32,13 +32,22 @@ import {
   readAppExtensionParameters,
 } from './wiring/parameters';
 import { RoutingProvider } from './routing/RoutingContext';
-import { ApiHolder, RouteRef } from '@backstage/core-plugin-api';
+import {
+  ApiHolder,
+  appThemeApiRef,
+  RouteRef,
+} from '@backstage/core-plugin-api';
 import { getAvailablePlugins } from './wiring/discovery';
 import {
   ApiFactoryRegistry,
   ApiProvider,
   ApiResolver,
+  AppThemeSelector,
 } from '@backstage/core-app-api';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { AppThemeProvider } from '../../core-app-api/src/app/AppThemeProvider';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { themes } from '../../app-defaults/src/defaults/themes';
 
 /** @public */
 export function createApp(options: { plugins: BackstagePlugin[] }): {
@@ -140,11 +149,13 @@ export function createApp(options: { plugins: BackstagePlugin[] }): {
         .filter(Boolean);
       return (
         <ApiProvider apis={apiHolder}>
-          <RoutingProvider routePaths={routePaths}>
-            {rootComponents.map((Component, i) => (
-              <Component key={i} />
-            ))}
-          </RoutingProvider>
+          <AppThemeProvider>
+            <RoutingProvider routePaths={routePaths}>
+              {rootComponents.map((Component, i) => (
+                <Component key={i} />
+              ))}
+            </RoutingProvider>
+          </AppThemeProvider>
         </ApiProvider>
       );
     },
@@ -169,6 +180,13 @@ function createApiHolder(coreExtension: ExtensionInstance): ApiHolder {
     factoryRegistry.register('default', factory);
   }
 
+  factoryRegistry.register('static', {
+    api: appThemeApiRef,
+    deps: {},
+    // TODO: add extension for registering themes
+    factory: () => AppThemeSelector.createWithStorage(themes),
+  });
+
   ApiResolver.validateFactories(factoryRegistry, factoryRegistry.getAllApis());
 
   return new ApiResolver(factoryRegistry);